addeventlistener事件第三個參數_DOM事件的簡單思考

文法

element.addEventListener('click', function () {

 }, false);
           

• addEventListener()

  來綁定事件
• 第一個參數 : ''事件名"
• 第二個參數 : ''事件響應函數''
• 第三個參數 : "事件執行時機" 預設是false
• false表示冒泡階段執行
• true表示捕獲階段執行

了解

• 阻止預設事件

• e.preventDefault()

• 阻止冒泡

• e.stopPropagation（）

• jQuery的話

• el.on（'事件名',false）

• false作用就相當于阻止預設事件和阻止冒泡

深入了解

DOM事件觸發的完整流程

問題:

• 為什麼事件的發生要分為兩個階段?

曆史原因: 微軟和其他人打架

• 事件是怎麼觸發的?

事件可以在捕獲階段觸發,也可以在冒泡階段觸發,我們通常會選擇在冒泡階段觸發

• 事件觸發的效果了解

事件觸發的效果

實作點選隐藏圖層的案例

JS Bin​js.jirengu.com

我們先點選button的時候,隻觸發fn1,可是冒泡原理讓fn2 也觸發了

JS Bin​js.jirengu.com

在div.wrap 層(button的上一層),阻止冒泡,這樣document的fn2就不會執行

我們點選wrap以外的區域時,自然會觸發fn2, 隐藏掉樣式

問題:

1. 如何做到再次點選button的時候,也隐藏掉樣式呢? 這樣讓使用者體驗更好啊!
2. 綁定的事件太多了? 為了節省記憶體,應該要優化? 如何優化呢?

優化方案1

為了優化記憶體,選擇把document的事件隻綁定一次,事件執行結束,就立馬解綁!

JS Bin​js.jirengu.com

解決方案

1. 在wrap層阻止冒泡,進而讓fn2不執行,下次點選wrap以外的地方時,再觸發就好了嗎,觸發一次,這個事件就自動解綁了
2. 反思:
   1. 雖然節省了記憶體,但是使用者體驗的問題依然存在,是以不是最好方案啊
3. 設定一個定時器,進而讓代碼異步
4. 冒泡階段執行完成,定時器裡面的代碼才執行,這樣就不會發生click沖突事件了

JS Bin​js.jirengu.com

1. 1. 這個代碼仍然有問題
   2. 點選兩次點我的時候,第三次就沒反應了
   3. 出現bug3的原因,就是每次點選都會添加一個fn2到下一次冒泡
   4. 點選按鈕 進去下一次冒泡就會導緻點選事件沖突