DOM事件流的三個階段

時間 2019-11-15

標籤 dom 事件三個階段欄目 HTML 简体版

原文原文鏈接

事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程即DOM事件流。html

DOM事件流分爲三個階段，分別爲：ui

捕獲階段：事件從Document節點自上而下向目標節點傳播的階段；spa

目標階段：真正的目標節點正在處理事件的階段；3d

冒泡階段：事件從目標節點自上而下向Document節點傳播的階段。code

捕獲階段：htm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10  .father { 11  overflow: hidden; 12  width: 300px; 13  height: 300px; 14  margin: 100px auto; 15             background-color: pink; 16             text-align: center; 17  } 18         
19  .son { 20  width: 200px; 21  height: 200px; 22  margin: 50px; 23             background-color: purple; 24             line-height: 200px; 25  color: #fff; 26  } 27     </style>
28 </head>
29 
30 <body>
31     <div class="father">
32         <div class="son">son盒子</div>
33     </div>
34     <script>
35         var son = document.querySelector('.son'); 36         son.addEventListener('click', function() { 37             console.log('son'); 38         }, true); 39         var father = document.querySelector('.father'); 40         father.addEventListener('click', function() { 41             console.log('father'); 42         }, true); 43         document.addEventListener('click', function() { 44             console.log('document'); 45         }, true); 46     </script>
47 </body>
48 
49 </html>

控制檯輸出結果爲：blog

能夠看出捕獲階段事件是從Document節點自上而下向目標節點傳播的。事件

冒泡階段：

 1 <script>
 2         var son = document.querySelector('.son');  3         son.addEventListener('click', function() {  4             console.log('son');  5         }, false);  6         var father = document.querySelector('.father');  7         father.addEventListener('click', function() {  8             console.log('father');  9         }, false); 10         document.addEventListener('click', function() { 11             console.log('document'); 12  }) 13     </script>