標準事件模型和IE事件模型

在瀏覽器解析事件的時候，有兩種觸發方式，一種叫做bubbling(冒泡)，另外一種叫做capturing(捕獲)。這裡不做過多解釋

這裡分析三種繫結事件模式

1、 traditional module

傳統方式的事件模型即直接在dom元素上繫結事件處理器，例如—

window.onload=function
()obj.onmouseover=function
(e)obj.onclick=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) else 
}//移除
//註冊
function
removeeventhandler(element,
evtname, callback, usecapture) else 
}

1、當我們需要阻止瀏覽器某dom元素的預設行為的時候在w3c下呼叫e.preventdefault()，而在ie下則通過window.event.returnvalue＝false來實現。

跨瀏覽器阻止預設行為：

function somehandle(event)

2、當我們要阻止事件冒泡的時候，在w3c標準裡呼叫e.stoppropagation()，而在ie下通過設定window.event.cancelbubble=true來實現。

跨瀏覽器阻止冒泡：

function somehandle(event)

標準事件模型和IE事件模型

事件模型和標準庫

IE事件模型向上冒泡

標準和模型和IE盒模型

標準事件模型和IE事件模型

事件模型和標準庫

IE事件模型 向上冒泡

標準和模型和IE盒模型

相關推薦

IE事件模型向上冒泡