DOM事件機制(事件捕獲和事件冒泡和事件委託)

時間 2019-11-13

標籤 dom 事件機制捕獲冒泡委託欄目 HTML 简体版

原文原文鏈接

內容：html

1.事件複習前端

2.事件冒泡與事件捕獲瀏覽器

3.事件委託dom

1.事件複習函數

(1)事件spa

事件是用來處理響應的一個機制，這個響應能夠來自於用戶(點擊, 鼠標移動, 滾動), 也能夠來自於瀏覽器code

下面的連接描述了全部事件：https://developer.mozilla.org/en-US/docs/Web/Eventshtm

(2)事件綁定對象

事件綁定有3種方法，前兩鍾方法在這裏不介紹，主要看第三種：blog

addEventListener方法(使用事件監聽綁定事件)

addEventListener：

1 element.addEventListener(event, function, useCapture)
2 event : （必需）事件名，支持全部 DOM事件 注：事件名要去掉開頭的on
3 function：（必需）指定要事件觸發時執行的函數
4 useCapture：（可選）指定事件是否在捕獲或冒泡階段執行。true，捕獲。false，冒泡。默認false

2.事件冒泡與事件捕獲

事件冒泡：從觸發事件的那個節點一直到document，是自下而上的去觸發事件
事件捕獲：指從document到觸發事件的那個節點，即自上而下的去觸發事件
事件委託：利用了事件冒泡的原理
補充：綁定事件方法（addEventListener）的第三個參數，就是控制事件觸發順序是否爲事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡。該參數默認爲false，當對一個dom節點觸發事件時，若外層的節點也設置了相應的事件函數，就會使外層的節點也觸發本身的事件函數，而若是設置該參數爲true，當對一個dom節點觸發事件時，將從最外層開始觸發事件而不是從這個dom節點開始！

阻止事件冒泡：event.cancelBubble = true

取消事件冒泡：

1 if(typeof e.cancelBubble == 'undefined'){
2     e.stopPropagation();  // 兼容IE  
3 } else{
4     e.cancelBubble = true;
5 }

事件冒泡實例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>事件冒泡和事件捕獲</title>
 6     <style>
 7         #id1 {
 8             background: lightblue;
 9             padding: 20px;
10         }
11         #id2 {
12             background: lightyellow;
13             padding: 20px;
14         }
15     </style>
16 </head>
17 <body>
18 <div id='id1'>
19     <div id="id2">
20         <button id='id3'>id3 按鈕</button>
21     </div>
22 </div>
23 <script>
24     var id1 = document.querySelector('#id1');
25     var id2 = document.querySelector('#id2');
26     var id3 = document.querySelector('#id3');
27     // 事件冒泡:
28     id1.addEventListener('click', function(event){
29         console.log('click id1', event)
30     });
31     id2.addEventListener('click', function(event){
32         console.log('click id2', event)
33     });
34     id3.addEventListener('click', function(event){
35         console.log('click id3', event)
36 
37         // 阻止事件冒泡
38         // event.cancelBubble = true
39     });
40 </script>
41 </body>
42 </html>

事件捕獲實例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>事件冒泡和事件捕獲</title>
 6     <style>
 7         #id1 {
 8             background: lightblue;
 9             padding: 20px;
10         }
11         #id2 {
12             background: lightyellow;
13             padding: 20px;
14         }
15     </style>
16 </head>
17 <body>
18 <div id='id1'>
19     <div id="id2">
20         <button id='id3'>id3 按鈕</button>
21     </div>
22 </div>
23 <script>
24     var id1 = document.querySelector('#id1');
25     var id2 = document.querySelector('#id2');
26     var id3 = document.querySelector('#id3');
27    
28     // 事件捕獲:
29     // addEventListener 的第三個參數 useCapture 設置爲true
30     id1.addEventListener('click', function(event){
31         console.log('capture click id1', event)
32     }, true);
33     id2.addEventListener('click', function(event){
34         console.log('capture click id2', event)
35     }, true);
36     id3.addEventListener('click', function(event){
37         console.log('capture click id3', event)
38     }, true);    
39 </script>
40 </body>
41 </html>

3.事件委託

 1 事件委託相關概念
 2 ===
 3 
 4 在前端中一些元素是動態添加的
 5 對於這樣的元素, 咱們沒辦法實現綁定事件
 6 咱們能夠把 click 事件綁定在事先存在的父元素上
 7 經過父元素響應click事件 調用相應的事件響應函數
 8 而事件響應函數會被傳入一個參數, 就是事件自己
 9 而後在運行的時候經過 event.target 屬性(發起事件的元素，例如某個按鈕)
10 來檢查被點擊的對象是不是須要的對象, 若是是就能夠對這個對象進行操做, 這個概念就是事件委託

事件委託實例：

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>事件委託實例</title>
 8 </head>
 9 <body>
10 
11 
12 <div id="test">
13     <button class="i1">按鈕1</button>
14     <button class="i2">按鈕2</button>
15     <button class="i3">按鈕3</button>
16 </div>
17 
18 </body>
19 
20 <script>
21     // 事件委託:
22     document.querySelector("#test").addEventListener("click", function (event) {
23         var target = event.target
24         log(target)
25         if(target.classList.contains("i1")){
26             alert("點擊了按鈕1")
27         }else if(target.classList.contains("i2")){
28             alert("點擊了按鈕2")
29         }else if(target.classList.contains("i3")){
30             alert("點擊了按鈕3")
31         }
32     })
33 </script>
34 
35 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。