内容：
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 来检查被点击的对象是否是需要的对象, 这个概念就是事件委托
原文地址：https://www.cnblogs.com/wyb666/p/9383161.html
时间： 2025-01-31 10:33:42