addEventListener和attachEvent的區別
阿新 • • 發佈:2019-01-26
element.addEventListener(type,listener,useCapture);
引數 | 引數說明 |
---|---|
element | 要繫結事件的物件,及HTML節點。 |
type | 事件名稱,注意去掉事件前邊的“on”,比如“onclick”要寫成“click”,“onmouseover”要寫成“mouseover”。 |
listener | 要繫結的事件監聽函式,注意只寫函式名,不要帶括號。 |
userCapture | 事件監聽方式,只能是true和false:true,採用capture(捕獲)模式;false,採用bubbling(冒泡)模式。如無特殊要求,一般是false。 |
如圖所示,有兩層div元素,而且都設定有click事件,一般來說,如果我在內層藍色的元素上click不只會觸發藍色元素的click事件,還會同時觸發紅色元素的click事件,而useCapture這個引數就是在控制這時候兩個click事件的先後順序。如果是false,那就會使用bubbling(冒泡)模式,他是從內而外的流程,所以會先執行藍色元素的click事件再執行紅色元素的click事件,如果是true,那就是capture(捕獲)模式,和bubbling(冒泡)模式相反是由外而內,會先執行紅色元素的click事件才執行藍色元素的click事件。
如果不同層的元素使用的useCapture不同,會先從最外層元素往目標元素尋找設定為capture(捕獲)模式的事件,到達目標元素執行目標元素的事件後,再尋原路往外尋找設定為bubbling(冒泡)模式的事件。