JavaScript的事件

我認爲的重點

1. 事件，事件監聽，事件處理函數，事件流的定義
2. 事件流的冒泡和捕獲階段是什麼?
3. DOM 節點有多個事件處理程序，他們的執行順序怎麼肯定?搜索程序的順序
4. 事件處理函數內添加事件監聽
5. 阻止默認事件和阻止冒泡的代碼
6. 結合事件知識點寫一個 demo

定義

對於一個經典的事件監聽函數,明確一些概念

btn.addEventListener("click", function(){
  //這個函數就是事件處理函數
  console.log(1)
})

• 事件 === 用戶的動做 ===在上面的代碼就是 "click"
• 事件監聽 === 上面的整個代碼 === 事件 + 事件處理函數
• 事件處理函數 === 在上面的代碼就是console.log(1)
• 事件流 === 事件在 DOM 節點樹傳播的順序,能夠是冒泡或者捕獲

  ​

冒泡階段和捕獲階段

1. 冒泡和捕獲階段測試 demo : http://js.jirengu.com/tofisal...
2. DOM

3. 問題: 點擊4區域,解釋打印結果

   注意點:

   1. div3 有兩個函數,注意執行順序
   2. div3 以後有個×, 他的實現的代碼是什麼?
4. 問題: 若是我點擊3區域,打印什麼?

   打印冒泡2222, 3 ,33333

5. 事件處理程序順序測試demo: http://js.jirengu.com/qoyoben...

   點擊 3 區域,解釋打印內容

6. 總結: 一個 DOM 結點事件處理程序的順序:

   1. 先捕獲後冒泡
   2. 哪一個代碼在前面, 哪一個代碼就先執行
   3. 通常狀況下, 是先看1,若是1相同,再看2
   4. 可是當 DOM 結點(如 demo 的 div4 )以後沒有 DOM 結點, 那個按照第2條規則處理

事件處理函數內添加事件監聽

1. 點擊3區域, 解釋打印內容

   • 代碼以下: http://js.jirengu.com/bonacob...
   • 根據代碼畫出 DOM

     從 div3 開始冒泡, 因此打印3, 2

2. 改變需求: 點擊3區域的時候, 只打印3, 第二次點擊3區域的時候,打印3, 2

   • 代碼: http://js.jirengu.com/jiresoy...
   • 根據代碼畫出 DOM

3. 總結:

   • 當你給 DOM 節點的事件處理函數內添加了一個事件監聽A, 那麼事件監聽A是立刻添加到 DOM 中(也就是說剛添加的事件監聽A在第一次點擊就能激活, 看第一個例子)
   • 若是你想讓添加的事件監聽A不是立刻添加到 DOM 中(也就是說剛添加的事件監聽A在第二次點擊才能激活)那麼能夠使用setTimeout解決. (看第二個例子)

​

dismissible propover

1. 效果: http://js.jirengu.com/nanepev...
2. 列出全部狀況

3. 注意點:

   • 何時用事件處理函數內添加事件監聽?

     第二次與第一次的 DOM 結構函數不一樣 + 第二次是在第一次的某種狀況下(紅圈)

     ​

​