HTML DOM addEventListener（）方法 ---- 2021/7/15

定义和用法：
addEventListener 用于向指定元素添加事件句柄
注意：使用removeEventListener （）方法来移除addEventListener（）方法添加的事件句柄
语法

element.addEventListener( event, function, useCapture )

参数值

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象
useCapture	可选,布尔值，指定事件是否在捕获阶段或冒泡阶段执行；true - 事件句柄在捕获阶段执行； false- 默认。事件句柄在冒泡阶段执行

实例：使用可选useCapture 来演示冒泡和捕获阶段的不同

<div id="box1">
  <div id="box2">
    content
  </div>
</div>
<script>
const $ = document.querySelector.bind(document);
const box1 = $('#box1');
const box2 = $('#box2');
box1.addEventListener('click', () => {
   
  console.log('box1 true');
}, true);
box1.addEventListener('click', () => {
   
  console.log('box1 false');
}, false);
box2.addEventListener('click', () => {
   
  console.log('box2 true');
}, true);
box2.addEventListener('click', () => {
   
  console.log('box2 false');
}, false);
</script>

输出： box1 true，box2 true，box2 false，box1 false
————————————————
版权声明：本文为CSDN博主「Mr.Plum」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43186285/article/details/118699353

冒泡和捕获阶段
参考文章：【JS事件的捕获和冒泡阶段】

 <div id="ancestor"> 

       <button id="child"> 
           child
       </button> 
        <button id="child2"> 
           child2
       </button> 
</div>

捕获事件过程：

1、Window
2、Document
3、Body
4、Div#ancestor
5、Button#child

冒泡事件过程：

6、Div#ancestor
7、Body
8、Document
9、Window
简单来说，捕获就是从父到子，冒泡就是从子到父