addEventListener等事件監聽的參數細談

簡單記錄，學習參考

前言：

寫的目的主要是細化到具體的參數，相容性的文章可以參考其他我部落格的文章。

1.addEventListener(type,listener.useCapture)

• type              字元串，事件名稱，如'click'等 不需要'on'字首
• listener         事件處理的函數，實作EventListener接口
• useCapture   是否使用捕獲--- true為捕獲，false為冒泡

a.  先從 第3個參數開始吧。

/*
html文檔樹結構
*/
<div id="out">
   <div id="innerP">
         <div id="innerChild">最裡面的孩子</div>
   </div>
</div>

<div id="showInfo"></div>
           

var out = document.getElementById('out');
var innerP = document.getElementById('innerP');
var innerChild = document.getElementById('innerChild');
var infoShow = document.getElementById('infoShow');
/*
綁事件
*/
out.addEventListener('click',function(){infoShow.innerHTML += 'outDiv' + '<br />'},false);

innerP.addEventListener('click',function(){infoShow.innerHTML += 'innerP' + '<br />'},false);

innerChild.addEventListener('click',function(){infoShow.innerHTML += 'innerChild' + '<br />'},false);      

  測試原理設計：        因為我們測試的是第3個參數,它有true和false兩個值，是以有六種排列

測試結果：

1. 設定了true的觸發的順序永遠在false之前。

比如：我修改了innerP的true,在點選 innerChild的時候觸發順序還是 innerP在前。

     2.  全為 false的話

點選 innerChild觸發的順序是 innerChild-------innerP------outDiv

     3. 全為 true的話

點選 innerChild觸發的順序是 outDiv------innerP-------innerChild

b.  下面說說 第二個參數listener

•   可以附加多個事件處理函數，執行順序按照綁定的先後
•   還有就是關于處理函數删除的問題，使用addEventListener()将事件處理函數加入到捕獲階段，則必須在removeEventListener()中指明是捕獲階段，才能正确地删除這個事件處理函數。 

   使用傳統的方法直接給事件處理函數屬性指派，事件處理函數将被添加到事件的冒泡階段。

var out = document.getElementById('out');
out.onclick = fnClick;
out.addEventListener('click',fnClick,false);      

  但是直接指派的不同點在于，後續對事件處理函數的指派會清除前面的指派。