JS——事件流與事件處理程序

1.事件流：從頁面中接收事件的順序

---

1.1 IE ：事件冒泡流
1.2 Netscape ：事件捕獲
1.3 DOM事件流 ：事件捕獲階段——事件目標階段——事件冒泡階段
DOM2級事件規定 ：捕獲階段不會涉及目標事件。

2.事件處理程序

---

事件 ：用戶或者瀏覽器自身執行的 某種動做
事件處理程序 ：響應某個事件的 函數 。

---

2.1 HTML事件處理程序

用一個與該事件處理程序同名的HTML特性來指定。

2.1.1包含要執行的具體動做

<input type=」button」 value=」Click me」 onclick=」alert(‘Clicked’)」/>

2.1.2 調用其餘地方定義的腳本

<input type=」button」 value=」Click me」 onclick=」showMessage()」/>

2.1.3 缺點

1.時差問題：使用try-catch塊捕捉錯誤。onclick=」try { showMessage() ;} catch(ex) {} 」
2.程序的做用域鏈在不一樣瀏覽器中會致使不一樣結果
3.HTML和JS代碼耦合緊密

---

2.2 DOM0級事件處理程序

將一個函數賦值給一個事件處理程序屬性，例如：onclick。
爲事件處理程序賦值。

btn.onclick = function() { alert( this.id ); };

事件處理程序在元素的做用域中運行，this指向當前元素。
刪除事件處理程序：
btn.onclick = null;

---

2.3 DOM2級事件處理程序

addEventListener(處理的事件名，事件處理程序函數，布爾值)；
removeEventListener(處理的事件名，事件處理程序函數，布爾值)；
布爾值：捕獲階段調用事件處理程序：true。冒泡階段調用：false。大多數狀況下用false。

btn.addEventListener(「click」 , function() { alert(this.id); }, false);

好處：能夠添加多個事件處理程序。事件按照添加前後順序執行。
問題：匿名函數沒法移除。
最好寫成

var handler = function(){ alert(this.id); }; btn.addEventListener(「click」, handler, false); btn.removeEventListener(「click」, handler, false);

---

2.4 IE事件處理程序

attachEvent(事件處理程序名稱，事件處理程序函數)；
detachEvent(事件處理程序名稱，事件處理程序函數)；

經過該方法添加的事件處理程序，都會被添加到冒泡階段。

btn.attachEvent(「onclick」,function(){ alert(「clicked」); });

注意：使用DOM級方法時，事件會在所屬元素的做用域內運行；使用attachEvent()方法，事件處理程序會在全局做用域運行，this==window。
好處：能夠添加多個事件處理程序。後添加先執行。
問題：匿名函數沒法移除。

var handler = function(){ alert(this.id); }; btn.attachEvent (「onclick」, handler); btn.detachEvent (「onclick」, handler);

---

2.5跨瀏覽器事件處理程序

1.建立一個方法addHandler():區分使用哪一種方法來添加事件；
2.建立一個對象EventUtil。擁有兩個方法。
3.addHandler(要操做的元素，事件名稱，事件處理函數)。
4.removeHandler(要操做的元素，事件名稱，事件處理函數)。

var EventUtil = {
    addHandler: function(element,type,handler){ if(element.addEventLister) { element.addEventListener(type,handler,false); } else if(element.attachEvent) { element.attachEvent("on"+type, handler); }else { element.["on"+type] =handler; } }, removeHandler: function(element,type,handler){ if(element.addEventLister) { element.removeEventListener(type,handler,false); } else if(element.attachEvent) { element.detachEvent("on"+type, handler); }else { element.["on"+type] = null; } } };

使用：

EventUtil.addHandler(btn ,」click」,handler); EventUtil.removeHandler(btn ,」click」,handler);