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事件机制(事件捕获和事件冒泡和事件委托)的主要内容,如果未能解决你的问题,请参考以下文章