事件流:分兩種,IE的是 事件冒泡流 ,事件開始時從最具體的元素接收,逐級向上傳播到較為不具體的節點(Element -> Document)。與之相反的是 Netscape 的 事件捕獲流 。
DOM2級事件規定事件流包括三個階段:事件捕獲階段、處於目標階段和事件冒泡階段。
大多數情況下都是將事件處理程序添加到事件流的冒泡階段。一個 EventUtil 的栗子:
var EventUtil = { addHandler: function(element, type, handler){ if(element.addEventListener){ element.addEventListener(type, handler, false); }else if(element.attachEvent){ element.attachEvent('on' + type, handler); // IE8 }else{ element['on' + type] = handler; } }, removeHandler: function(){...} }
下面我們詳細來看:
DOM0級事件處理程序
通過Javascript指定事件處理程序的傳統方式,就是將一個函數賦值給一個事件處理程序屬性。
每個元素都有自己的事件處理程序屬性,這些屬性通常全部小寫,例如onclick。將這種屬性的值設置為一個函數,就可以指定事件處理程序。
var btn = document.getElementById('myBtn'); // 添加事件處理程序 btn.onclick = function () { alert( this );//為DOM元素btn }; // 移除事件處理程序 btn.onclick = null;
優點:1.簡單2.具有跨浏覽器的優勢
缺點:在代碼運行之前不會指定事件處理程序,因此這些代碼在頁面中位於按鈕後面,就有可能在一段時間怎麼點擊都沒反應,用戶體驗變差。
DOM2級事件處理程序
定義了兩個方法,用於處理指定和刪除事件處理程序的操作:addEventListener()和removeEventListener()。三個參數,1.要處理的事件名。2.作為事件處理程序的函數3.一個布爾值。最後這個布爾值為true,表示在捕獲階段調用事件處理程序,false表示在冒泡階段調用事件處理程序。
// 添加多個事件處理程序 var btn = document.getElementById('myBtn'); btn.addEventListener('click',function (){ alert( this );// 為DOM元素btn },false ); btn.addEventListener('click',function () { alert('Hello World'); },false); // 移除事件處理程序 btn.removeEventListener('click',function () { // 匿名函數無法被移除,移除失敗 },false); // 改寫 var handler = function () { alert(this.id); }; btn.addEventListener('click',handler,false); // 再次移除事件處理程序 btn.removeEventListener('click',handler,false);// 移除成功
這兩個事件處理程序會按照添加他們的順序觸發。大多數情況,都是將事件處理程序添加到事件流的冒泡階段,這樣可以最大限度的兼容各種版本的浏覽器。
優點: 一個元素可以添加多個事件處理程序
缺點: IE8及以下浏覽器不支持DOM2級事件處理程序。(包括IE8)
IE事件處理程序
定義了兩個方法,與上類似:attachEvent(),detachEvent()。這兩個方法接收相同的兩個參數:事件處理程序名稱和事件處理程序函數。由於IE8以及更早版本的浏覽器只支持事件冒泡,所以通過detachEvent()添加的事件處理程序會被添加到冒泡階段。
var btn = document.getElementById('myBtn'); btn.attachEvent('onclick', function(){ alert( this );// window }); btn.attachEvent('onclick', funciton(){ alert("HELLO, WORLD"); });
點擊按鈕,這兩個事件處理程序的觸發順序與上述剛好相反。不是按照添加事件處理程序的順序觸發,剛好相反。
優點:一個元素可以添加多個事件處理程序
缺點:只支持IE。
跨浏覽器的事件處理程序
eg:
var EventUtil = { addHandler : function ( ele, type, handler ) { if ( ele.addEventListener ) { ele.addEventListener( type, handler, false ); } else if ( ele.attachEvent ) { ele.attachEvent( 'on' + type, handler ); } else { ele['on' + type] = handler } }, removeHandler: function ( ele, type, handler ) { if ( ele.removeEventListener ) { ele.removeEventListener( type, handler, false ); } else if ( ele.detachEvent ) { ele.detachEvent( 'on' + type, handler ); } else { ele[ 'on' + type ] = null; } } }