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);