在瀏覽器解析事件的時候,有兩種觸發方式,一種叫做Bubbling(冒泡),另外一種叫做Capturing(捕獲)。這裏不做過多解釋
這裏分析三種綁定事件模式
1、 Traditional Module
傳統方式的事件模型即直接在DOM元素上綁定事件處理器,例如—
window.οnlοad=function(){…}
obj.οnmοuseοver=function(e){…}
obj.οnclick=function(){…}
首先這種方式是無論在IE還是Firefox等其他瀏覽器上都可以成功運行的通用方式。這便是它最大的優勢了,而且在Event處理函數內部的this變量無一例外的都指向被綁定的DOM元素,這使得Js程序員可以大大利用this關鍵字做很多事情。
缺點就是傳統方式只支持Bubbling,而不支持Capturing,並且一次只能綁定一個事件處理器在DOM元素上,無法實現多Handler綁定。最後就是function參數中的event參數只對非IE瀏覽器有效果(因爲IE瀏覽器有特製的window.event)。
2、 W3C (Firefox.e.g) Event Module
Firefox等瀏覽器很堅決的遵循W3C標準來制定瀏覽器事件模型,使用addEventListener和removeEventListener兩個函數,看幾個例子—
window.addEventListener(‘load’,function(){…},false);
document.body.addEventListener(‘keypress’,function{…},false);
obj.addEventListener(‘mouseover’,MV,true);
function MV(){…}
這裏注意函數後面是否帶()
addEventListener帶有三個參數,第一個參數是事件類型,就是我們熟知的那些事件名字去掉前面的’on’,第二個參數是處理函數,可以直接給函數字面量或者函數名,第三個參數是boolean值,表示事件是否支持Capturing。
W3C的事件模型優點是Bubbling和Capturing都支持,並且可以在一個DOM元素上綁定多個事件處理器,各自並不會衝突。並且在處理函數內部,this關鍵字仍然可以使用只想被綁定的DOM元素。另外function參數列表的第一個位置(不管是否顯示調用),都永遠是event對象的引用。
至於它的缺點,很不幸的就只有在市場份額最大的IE瀏覽器下不可使用這一點。
3、 IE Event Module
IE自己的事件模型跟W3C的類似,但主要是通過attachEvent和detachEvent兩個函數來實現的。依舊看幾個例子吧—
window.attachEvent(‘onload’,function(){…});
document.body.attachEvent(‘onkeypress’,myKeyHandler);
可以發現它跟W3C的區別是沒有第三個參數,而且第一個表示事件類型的參數也必須把’on’給加上。這種方式的優點就是能綁定多個事件處理函數在同一個DOM元素上。
至於它的缺點,爲什麼如今在實際開發中很少見呢?首先IE瀏覽器本身只支持Bubbling不支持Capturing;而且在事件處理的function內部this關鍵字也無法使用,因爲this永遠都只想window object這個全局對象。要想得到event對象必須通過window.event方式,最後一點,在別的瀏覽器中,它顯然是無法工作的。
跨瀏覽器的註冊事件和移除事件:
//註冊
function addEventHandler(element,
evtName, callback, useCapture) {
//DOM標準
if (element.addEventListener)
{
element.addEventListener(evtName,
callback, useCapture);
}else {
//IE方式,忽略useCapture參數
element.attachEvent('on' +
evtName, callback);
}
}
//移除
//註冊
function removeEventHandler(element,
evtName, callback, useCapture) {
//DOM標準
if (element.removeEventListener)
{
element.removeEventListener(evtName,
callback, useCapture);
}else {
//IE方式,忽略useCapture參數
element.dettachEvent('on' +
evtName, callback);
}
}
其他:
1、 當我們需要阻止瀏覽器某DOM元素的默認行爲的時候在W3C下調用e.preventDefault(),而在IE下則通過window.event.returnValue=false來實現。
跨瀏覽器阻止默認行爲:
function someHandle(event)
{
event
= event || window.event;
if(event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
}
2、當我們要阻止事件冒泡的時候,在W3C標準裏調用e.stopPropagation(),而在IE下通過設置window.event.cancelBubble=true來實現。
跨瀏覽器阻止冒泡:
function someHandle(event)
{
event
= event || window.event;
if(event.stopPropagation)
event.stopPropagation();
else
event.cancelBubble= true;
}