JavaScript事件監聽以及addEventListener參數分析

事件監聽

在Javascript中事件的監聽是用來對某些操作做出反應的方法。例如監聽一個按鈕的pressdown, 或者獲取鼠標左鍵按下時候鼠標的位置。這些都需要使用監聽來完成。監聽的函數很簡單：addEventListener.
這里解釋一下一個網頁的嵌套關系：最外層：window 包含：document 包含：html 包含: body 包含：div等等...

addEventListener監聽方法

按鈕監聽事件響應

首先我們需要獲取一個按鈕的handle，獲取的方法很簡單，代碼如下：
var btn = document.getElementById("btnExample");
然后給btn添加事件監聽：
btn.addEventListener("click", btn_click_function, false);
現在當我們對id為btn的按鈕點擊的時候，就會觸發btn_click_function函數，這個函數可以是匿名的回調函數(假如不太懂，請百度)，也可以是自己寫的一個函數，在這里調用。這里說明下，這些函數都會傳入一個event的參數。這個參數有很多屬性，並且涉及到第三個為false的參數，我們后面討論。
對於這兩種方法我分別都放一個例子：

1、匿名回調函數

var exportBtn = document.getElementById("createImageData");  
  
exportBtn.addEventListener("click",function() {  
            //write function code here  
        }, false);

2、自己命名回調函數

var exportBtn = document.getElementById("createImageData");  
exportBtn.addEventListener("click", createImageDataPressed, false);  

窗口事件響應

窗口事件響應，就是我們對整個窗口進行監聽，並不限於按鈕和輸入框等。
則只需要把上面的btn改成window或者document就可以了。

addEventListener參數分析

addEventListener(type:String, listener:Function, useCaputer:Boolean(default:false), priority:int(default:0), useWeakReference:boolean (default:false) );

在addEventListener中前三個參數比較重要，第一個參數是事件類型，例如click或pressdown pressup等等，第二個參數就是響應的時候所執行的函數，第三個是事件流的問題。第四個是優先級，第五個是強引用or弱引用，假如是強引用不會被當做垃圾回收掉。

第一個已經說完了，第二個參數在上部分已經舉過例子了，第三個參數這里着重講一下：(內容比較多，我先放百度的解釋)

這里牽扯到“事件流”的概念。偵聽器在偵聽時有三個階段：捕獲階段、目標階段和冒泡階段。順序為：捕獲階段（根節點到子節點檢查是否調用了監聽函數）→目標階段（目標本身）→冒泡階段（目標本身到根節點）。此處的參數確定偵聽器是運行於捕獲階段、目標階段還是冒泡階段。 如果將 useCapture 設置為 true，則偵聽器只在捕獲階段處理事件，而不在目標或冒泡階段處理事件。 如果useCapture 為 false，則偵聽器只在目標或冒泡階段處理事件。 要在所有三個階段都偵聽事件，請調用兩次 addEventListener，一次將 useCapture 設置為 true，第二次再將useCapture 設置為 false. (此段內容來源於百度 )。

捕獲階段就是如第一部分所說的網頁嵌套關系中的，從外到里的傳遞過程，而冒泡階段就是從目標到最外層的傳遞過程，這個參數就是告訴監聽事件在什么時刻觸發。

■事例：

<div id="outDiv">
  <div id="middleDiv">
    <div id="inDiv">請在此點擊鼠標。</div>
  </div>
</div>

<div id="info"></div>
 

var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
 
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我們測試的代碼，根據 info 的顯示來確定觸發的順序，有三個 addEventListener，而 useCapture 可選值為 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

• 全為 false 時，觸發順序為：inDiv、middleDiv、outDiv；
• 全為 true 時，觸發順序為：outDiv、middleDiv、inDiv；
• outDiv 為 true，其他為 false 時，觸發順序為：outDiv、inDiv、middleDiv；
• middleDiv 為 true，其他為 false 時，觸發順序為：middleDiv、inDiv、outDiv；
• ……

最終得出如下結論：

• true 的觸發順序總是在 false 之前；
• 如果多個均為 true，則外層的觸發先於內層；
• 如果多個均為 false，則內層的觸發先於外層。