一、 事件流
1. 事件流描述的是從頁面中接收事件的順序
2. 事件冒泡(event bubble):事件從開始時由最具體的元素(就是巢狀最深的那個節點)開始,逐級向上傳播到較為不具體的節點(就是document)
點選這裡
/*如果點選了div元素,那麼這個click事件會按如下順序傳播
1. 2. 3. 4. document
click事件首先在div元素上發生,也就是我們點選的元素,然後body元素發生點選事件……一層一層往上冒
*/
3. 事件捕獲:不太具體的節點(document根節點)更早接收到事件,最具體的節點最後接收到事件,剛好與冒泡相反
4. dom事件流三階段:
1. 事件捕獲階段:首先發生,為截獲事件提供機會
2. 處於目標階段:事件在此觸發
3. 事件冒泡階段:在這個階段對事件作出相應
4. 跨瀏覽器的事件處理函式【可復用,最好手寫】:
var eventutil =else
if(element.attachevent)
else
}removehandler:
function
(element , type , handler)
else
if(element.detachevent)
else
}getevent:
function
(event),
gettarget:
function
(event),
preventdefault:
function
(event)
else
},stoppropagation:
function
(event)
else
}};
5. 事件處理程式:響應某個事件的處理函式就是事件處理函式
1. 常用的兩個方法:用於處理指定和刪除事件處理函式的操作方法:addeventlistener()/removeeventlistener()
2. 這兩個方法接受3個引數:(事件名,處理函式,[,布林值])。布林值預設為false,表示在冒泡階段呼叫事件處理函式,true表示在捕獲階段呼叫事件處理函式
btn.addeventlistener('click' , function(){} , false)
//可新增多個事件處理函式
//移除↓
btn.removeeventlistener('click' , handler [, false])//
移除的事件處理函式不能是匿名函式
6. 事件物件:在觸發dom的某個事件時,會產生乙個事件物件:event,這個物件包含著所有的事件資訊
1. currenttarget:繫結事件處理函式的那個目標。在事件處理程式內部,this始終等於currenttarget的值
2. target:事件被觸發的那個目標
3. type:事件的型別:是click,還是mouseover……當需要乙個函式處理多種事件時可以:
var handler = function(event)
break
;
case 'mouseover':
function
(){}
break
;
case 'mouseout':
function
(){}
break
; }}
btn.onclick =handler;
btn.mouseover =handler;
btn.mouseout = handler;
//為每個li元素都新增乙個事件處理函式,太麻煩。只需要給dom樹中盡量最高層新增事件處理函式
eventutil.addhandler(ul , 'click',handler);
function
handler(event);
break
;
case 'li2':
function
(){};
break
;
case 'li3':
function
(){};
break
; }
}------------------解析------------------
/*1. 用事件委託只為ul元素新增了乙個click事件,由於所有的li元素都是ul的子節點,在li上的事件會往上冒泡,最終會冒到ul上,觸發在ul上繫結的事件處理函式。
2. 因為只為乙個dom元素,新增了乙個事件處理函式,占用記憶體更小,速度更快
3. 如果可行的話,可以考慮為document新增乙個事件處理函式,優點如下:
1. document物件訪問很快,可以在頁面生命週期的任何時間為它新增事件處理函式
2. 在頁面中設定事件處理函式所需的時間更少,對dom的引用更少
3. 最適合採用的事件包括:click、mousedown/up、keydown/up/press
*/
JS高階程式設計學習筆記之JS事件(1)
事件流 冒泡定義 事件開始時由最具體的元素接收,然後逐級上傳到較為不具體的節點。ie9 ff chrome safari會將事件一直冒泡到window物件。ie5.5及其以下會跳過元素,直接從body跳到document 若發生事件的節點元素並沒有繫結該事件,則這個動作會向上冒泡,直到被執行,一直冒...
JS高階 封裝註冊事件
相容性問題 1 ele.on事件型別 function 乙個元素ele註冊一種事件多次,會被替換成最後乙個,所以有侷限性 2 addeventlistener 事件型別,事件處理函式,usecapture 第三個引數預設是false,冒泡階段執行 3 attachevent 事件型別,事件處理函式 ...
js高階程式設計之跨瀏覽器事件處理
事件 var eventutil else if element.attachevent else 獲取dom event物件或者ie event物件 getevent function event 獲取執行事件物件 gettarget function event 阻止事件預設行為 prevent...