記錄addEventListener的相關知識

1、addeventlistener的引數有三個引數：第乙個引數表示事件名稱（不包括on，比如「click」）；第二個引數表示要接收事件處理的函式，第三個引數為usecapture

記錄一下第三個引數，有兩種方式，可以設定成boolean型別（usecapture）或者object型別（options）

當第三個引數時object型別時，

1、capture：預設false，是否使用時間捕獲，也就是使用事件冒泡；

2、once：預設值為false，是否只呼叫一次，如果是true，會在呼叫後自動銷毀listener；

3、passive：如果是true，意味著listener永遠不會呼叫preventdefault方法，如果又確實呼叫了的話，

瀏覽器只會console乙個warning，而不會真的去執行preventdefault方法。根據規定預設值是false，

但是chrome，firefox等瀏覽器為了保證滾動時的效能，在document-level nodes（window，

document，document.body）上針對touchstart和touchmove事件，將passive預設值改為了true，

保證了在頁面滾動時不會因為自定義事件呼叫了preventdefault而阻塞頁面渲染。

capturing就是從上往下

1                | |
2 ---------------| |-----------------
3 | element1 | | |
4 | -----------| |----------- |
5 | |element2 \ / | |
6 | ------------------------- |
7 | event capturing |
8 -----------------------------------

這種情況下，事件發生後，註冊在element1上的handler（事件）會先觸發，註冊在element2上的handler會後觸發。

bubbling就是從下往上：

1                / \
2 ---------------| |-----------------
3 | element1 | | |
4 | -----------| |----------- |
5 | |element2 | | | |
6 | ------------------------- |
7 | event bubbling |
8 -----------------------------------

這種情況下，事件發生後，註冊在element2上的handler會先觸發，註冊在element1上的handler會後觸發。

1                  | |  /\
2 -----------------| |--| |-----------------
3 | element1 | | | | |
4 | -------------| |--| |----------- |
5 | |element2 \ / | | | |
6 | -------------------------------- |
7 | w3c event model |
8 ------------------------------------------

在w3c模型中，事件會先從上往下，到事件目標元素後，再從下往上，一直到最外面的元素。

parent div

2child div

1 const parent = document.queryselector('#parent');
2 const child = document.queryselector('#child');34
function
first() 
7function
second() 
1011 parent.addeventlistener('click', second, false
);12 child.addeventlistener('click', first);

點選child元素，會先彈出first，然後彈出second。為什麼會有這樣呢？

click事件再child元素發生之後，第一步是capturing階段，先從上往下尋找child元素的錨定元素中是否有可以觸發的handler，如果usecapture是true的話就會再此階段觸發，結果發現沒有可觸發的handler。

click事件到達child元素後觸發first方法，然後開始bubbling階段，到達parent元素時發現有用於此階段的handler，觸發second方法。

如果把**改成下面的樣子

1 parent.addeventlistener('click', second, true
);2 child.addeventlistener('click', first);

點選child元素，會先彈出second，然後彈出first。分析過程如下：

click事件再child元素發生後，第一步是capturing階段，先從上往下尋找child元素的錨定元素（ancestor element）中是否有可以觸發的handler，發現可以觸發second。

click事件到達child元素後觸發first方法，然後開始bubbling階段，到達parent元素時發現有用於此階段的handler，沒有發現可以觸發的handler。

為了避免出現記憶體洩漏問題，可以用removeeventlister來清除掉eventlistener。

關於j**ascript捕獲和冒泡移步這位大佬的文章：

DNS記錄型別介紹 A記錄 MX記錄 NS記錄等

dns a記錄 ns記錄 mx記錄 cname記錄 txt記錄 ttl值 ptr值建站名詞解釋 dns a記錄 ns記錄 mx記錄 cname記錄 txt記錄 ttl值 ptr值泛網域名稱泛解析網域名稱繫結網域名稱轉向 1.dns domain name system 網域名稱管理系統網...

DNS記錄型別介紹 A記錄 MX記錄 NS記錄等

mysql 記錄語句記錄

1 mysql select id,sum num from select from t1 union all select from t2 t1 union聯合查詢兩張表的同一欄位的值的和 2 show status like com select 查詢mysql執行了多少次select查詢。3...

記錄addEventListener的相關知識

DNS記錄型別介紹 A記錄 MX記錄 NS記錄等

DNS記錄型別介紹 A記錄 MX記錄 NS記錄等

mysql 記錄語句記錄

相關推薦