語法:
事件源.on+事件名稱 = 事件處理程式
例如:
btn.onclick = function(){}
細節:只能註冊乙個事件處理函式
相容:所有主流瀏覽器都相容
語法:事件源.addeventlistener(事件名稱,事件處理程式,在哪個階段執行)
例如:
btn.addeventlistener(「click」,function (){},false)
細節:事件名稱不能帶有on
可以為事件繫結多個處理程式
在事件處理函式中,this是對應的事件源
相容:ie8不支援
語法:事件源.attachevent(on+事件名稱,事件處理程式)
例如:
btn.attachevent(「onclick」,function(){})
細節:也可以註冊多個事件
註冊的事件要帶上on
在事件處理函式中,this是window
相容ie6到ie10支援,其餘都不支援
原理:判斷當前瀏覽器支援誰,支援哪個就用哪個來註冊
functionaddlistener(element,event,fn)
else
if(element.addeventlistener)
else
}
方法:事件源.on+事件名 = null;
語法:事件源.removeeventlistener(事件名,處理程式,在哪個階段)
例子:
btn.removeeventlistener(「click」,clickhandel,false)
細節:如果你在不同的階段分別繫結了兩個函式,要分開移除
移除的是使用addeventlistener繫結的處理程式
相容:ie8不支援
語法:事件源.detachevent(on+事件名,處理程式)
例子:
btn.detachevent(「onclick」,clickhandle)
細節:移除的是使用attachevent繫結的處理程式
相容:ie6-ie10支援,其餘不支援
事件的三個階段分為:事件捕獲階段、事件目標階段、事件冒泡階段
要知道事件的階段,需要通過乙個屬性: event.eventphase
當eventphase的值為1的時候,是事件捕獲階段,為2的時候是事件的目標階段,為3的時候是冒泡階段
事件在出現的時候
只會包含兩個階段:
a) 捕獲和目標
b) 冒泡和目標
冒泡和捕獲不會同時出現
三個階段的異同:
事件在觸發的時候,是有乙個過程的
事件冒泡:後代元素觸發某乙個型別的事件,同時這個元素會傳遞到前代元素,並且觸發前代元素的同類事件
事件捕獲:發生某種型別的事件的時候,先有捕獲的過程,先從前代元素遞到觸發事件的事件源子元素
事件目標階段:事件觸發到達事件源的時候
阻止冒泡
stoppropagation();//ie8不支援
cancelbubble=true;
on+eventtype 相應的解綁方式:事件源.eventtype=null;
addeventlistener 相應的解綁方式:事件源.removeeventlistener(type,已經繫結的處理程式的函式名,對應的階段);
以匿名函式的時候繫結的,是無法解綁的
如果繫結的時候,執行處理程式的階段不同(第三個引數的true和false不同),在解綁的時候,也必須使用相應的觸發階段才能成功解綁,簡而言之,如果是繫結的時候是false,解綁的時候也必須是false
解綁的時候只會解綁相同的函式名,如果不同就不會解綁,同名的函式重複繫結無效
attachevent 相應的解綁方式:事件源.detachevent(「on」+type,對應的繫結的函式名);、如果是以匿名函式的方式,也是無法解綁
每次解綁,函式名必須相同,否則不會解綁
總結:是用什麼方式繫結事件處理程式,就必須使用相應的解綁方式解綁
得知事件的型別也是通過事件的乙個屬性獲得
event.type
得到的是不帶on的事件名稱
利用這個屬性,我們可以實現給乙個元素註冊多個事件,卻呼叫同乙個函式
DOM 事件流,以及阻止冒泡
dom 事件流共有三個階段 1 事件捕獲階段 當事件發生的時候,事件從window開始依次往子元素傳遞 注意 在整個捕獲的過程中,如果父元素有同類事件也會被一併觸發 2 確定目標階段 找到目標 3 事件冒泡階段 從事件目標開始處理事件,處理完以後依次往父元素傳遞,一直傳到window 1 在標準瀏覽...
DOM元素的事件捕獲和冒泡
b 事件 當html頁面上發生乙個事件時,每個層次上的dom元素都有機會處理這個事件。以下面的html 為例 how are you 該頁面在瀏覽器上呈現的效果如下圖 html頁面呈現的效果 如果單擊了頁面中的a 錨 元素,那麼,和元素全都應該得到響應這次單擊的機會。因為這 3個元素同時都處於使用者...
關於DOM2級事件的事件捕獲和事件冒泡
dom2級事件中addeventlistener的執行機制,多個addeventlistener同時新增時的執行先後規律 w3c的dom事件觸發分為三個階段 事件捕獲階段,即由最頂層元素 一般是從window元素開始,有的瀏覽器是從document開始,至於其中的差別我稍後會更新 開始,逐次進入do...