DOM事件机制(事件捕获和事件冒泡和事件委托)

Posted wyb666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM事件机制(事件捕获和事件冒泡和事件委托)相关的知识,希望对你有一定的参考价值。

内容:

1.事件复习

2.事件冒泡与事件捕获

3.事件委托

 

 

 

1.事件复习

(1)事件

事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器

下面的链接描述了所有事件:https://developer.mozilla.org/en-US/docs/Web/Events

 

 

(2)事件绑定

事件绑定有3种方法,前两钟方法在这里不介绍,主要看第三种:

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 <!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 来检查被点击的对象是否是需要的对象, 这个概念就是事件委托

 

以上是关于DOM事件机制(事件捕获和事件冒泡和事件委托)的主要内容,如果未能解决你的问题,请参考以下文章

整理之DOM事件阶段冒泡与捕获事件委托ie事件和dom模型事件鼠标事件

事件冒泡 事件捕获 事件委托

事件捕获事件冒泡事件委托

事件捕获事件冒泡事件委托

JS之捕获冒泡和事件委托

JavaScript事件委托原理及Jquery中的事件委托