JavaScript 事件監聽 addEventListener

addEventListener()的工做原理是將實現EventListener的函數添加到調用它的EventTargrt上的指定事件類型的事件偵聽器列表中。

一、事件監聽  addEventListener (IE8及如下有兼容問題)

語法：ele.addEventListener(event_type , function ,布爾值(是否啓用事件捕獲去觸發事件))

　　1. 第一個參數是事件的類型（好比"click"鼠標單擊事件）；

　　2. 第二個參數是在事件發生時咱們要調用的函數；

　　3. 最後一個參數爲可選參數，不寫時默認false(即事件冒泡)。

　【注意】事件監聽中，請勿對事件類型event_type使用 "on" 前綴。好比要使用 "click" 代替 "onclick"。

1     <button id="btn">點我一下試試</button>
2     <script>
3         var btn_ele = document.getElementById("btn");
4         btn_ele.addEventListener("click" , function(){
5             alert("事件監聽，你點擊了按鈕");
6         });
7     </script>

二、移除監聽 removeEventListener

語法：ele.removeEventListener(事件類型,function)

---

傳統事件綁定（DOM0）和事件監聽器綁定（DOM2）的區別

 1     <button id="btn">點我一下試試</button>
 2     <script>
 3         var btn_ele = document.getElementById("btn");
 4 
 5         // 事件綁定
 6         btn_ele.onclick = function(){
 7             alert("事件綁定，你點擊了按鈕");
 8         }
 9         // 事件監聽
10         btn_ele.addEventListener("click" , function(){
11             alert("事件監聽，你點擊了按鈕");
12         });
13     </script>

DOM0 事件綁定

1.一個元素上只能有一個事件處理函數，容易刪除;

1         btn_ele.onclick = function(){
2             alert("事件綁定，你點擊了按鈕");
3             // 想讓事件只執行一次，添加下面這句話便可
4             btn_ele.onclick = null;
5         }

　　缺點：事件處理函數難以分割，存在覆蓋問題，容錯率低。

1         btn_ele.onclick = function(){
2             alert("事件綁定，你點擊了按鈕1");
3         }
4         btn_ele.onclick = function(){
5             alert("事件綁定，你點擊了按鈕2");//只彈出2，2把1覆蓋了
6         }

2.onclick的事件觸發順序是不可改變的，只能以冒泡的順序進行傳播。

1         btn_ele.onclick = function(){
2             alert("button事件綁定，你點擊了按鈕");
3         }
4         document.onclick = function(){
5             alert("document事件綁定，你點擊了按鈕");//冒泡：從裏到外觸發，先觸發button、再觸發document的
6         }

----------------------------------------

DOM2 事件監聽

1. 容許向一個元素添加多個相同事件，同時不覆蓋已有事件；

　　即一個事件能夠存着多個事件處理函數，容錯率更高。

1         btn_ele.addEventListener("click" , function(){
2             alert("事件監聽，你點擊了按鈕1");
3         });
4         btn_ele.addEventListener("click" , function(){
5             alert("事件監聽，你點擊了按鈕2");//點一次按鈕，會彈窗兩次，即1和2
6         });

　　向一個元素添加不一樣類型的事件固然也容許啦。

2. 刪除監聽時，須要用到API   removeEventListener()；

1         btn_ele.addEventListener("click" , function(){
2             alert("事件監聽，你點擊了按鈕");
3             // arguments.callee表明當前函數
4             btn_ele.removeEventListener("click" , arguments.callee);
5             // 此時 監聽在執行一次後被刪除
6         });

　　考慮到嚴格模式禁用callee屬性，咱們能夠將單獨函數提出來：

1         btn_ele.addEventListener("click" , clickHandler);
2         function clickHandler(){
3             "use strict"
4             alert("事件監聽，你點擊了按鈕");
5             btn_ele.removeEventListener("click" , clickHandler);
6         }

3. 事件監聽能夠改變事件流的觸發順序；

　　　——第3個參數爲true時事件捕獲，false時事件冒泡

1         btn_ele.addEventListener("click" , function(){
2             alert("button事件監聽，你點擊了按鈕");
3         },true);
4         document.addEventListener("click" , function(){
5             alert("document事件監聽，你點擊了按鈕");
6         },true);
7         // true爲事件捕獲，從外往裏逐個觸發。即先觸發document，再觸發button

冒泡和捕獲是事件傳播的2種方式

　　事件冒泡，是事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播到較爲不具體的節點（文檔）。瀏覽器默認事件冒泡。

　　簡單來講，事件冒泡是由內向外的事件傳播方式，而事件捕獲是從外往裏逐個觸發。

---

事件監聽的主動觸發  dispatchEvent() 

API: dispatchEvent(event); 在對應的元素上觸發一個事件

1. 建立一個新的事件對象; var e = new Event("event_type");

2. 觸發事件 : dispatchEvent(e) ;

 1         btn_ele.addEventListener("click" , function(){
 2             console.log("btn_ele 事件監聽主動觸發")
 3         });
 4         // btn_ele.onclick();//沒法觸發onclick。報錯btn_ele.onclick is not a function
 5         // 如何主動觸發？
 6         // 本身建立一個事件對象，去觸發這個事件處理函數
 7         var e = new Event("click");
 8         // btn_ele.dispatchEvent(e);
 9         // 若是是相似輪播圖效果 能夠加定時器
10         setInterval(function(){
11             btn_ele.dispatchEvent(e);
12         },1000)

　　　　　　　　

---

 

監聽器的兼容問題

　　IE8及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。

　　不過，對於這些特殊的瀏覽器版本，可使用 attachEvent() 方法向元素添加事件處理程序，並由 detachEvent() 方法刪除。

　【注意】使用attachEvent時，事件類型要加"on"前綴。

下面是事件監聽的兼容寫法：

 1         // IE8的監聽器寫法
 2         // document.attachEvent("onclick" , function(){
 3         //     alert("hello world");
 4         // });
 5         // 移除監聽是detachEvent
 6         
 7         // 兼容寫法以下
 8         // 事件監聽 : 
 9         function on( ele , type , callback ){ 
10             if(typeof ele.addEventListener === "function"){
11                 ele.addEventListener( type , callback );
12             }else{
13                 ele.attachEvent("on" + type , callback);
14             }
15         }
16         // 移除監聽 : 
17         function off( ele , type , callback ){
18             if(typeof ele.removeEventListener === "function"){
19                 ele.removeEventListener( type , callback );
20             }else{
21                 ele.detachEvent("on" + type , callback);
22             }
23         }