JS事件机制

事件与事件流

1.事件

       javascript 中的事件，可以理解就是在 HTML 文档或者浏览器中发生的一种交互操作，使得网页具备 互动性， 常见的有加载事件、鼠标事件、自定义事件等。

1.事件流

       描述了事件在文档中触发和传播过程。

事件流的过程：捕获阶段，目标阶段，冒泡阶段

捕获阶段：事件从根节点开始，逐级向下传播到目标元素

目标阶段：事件到达目标元素，触发目标元素的事件处理程序

冒泡阶段：事件从目标元素开始，逐级向上传播到根节点

例如：

<script>
// 获取DOM元素
const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');
//addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
//addEventListener(event, function, useCapture);
//默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
// 外层元素 - 捕获阶段处理（第三个参数为true）
outer.addEventListener('click', () => {
console.log('【捕获】外层元素被触发');
}, true);
// 内层元素 - 目标阶段处理（默认冒泡阶段，但目标阶段总会触发）
inner.addEventListener('click', () => {
console.log('【目标】内层元素被触发');
});
// 外层元素 - 冒泡阶段处理（第三个参数为false或省略）
outer.addEventListener('click', () => {
console.log('【冒泡】外层元素被触发');
});
</script>

（1）点击内层元素（.inner）的执行流程：

        触发outer的捕获监听器  ->  触发inner的监听器  ->触发outer的冒泡监听器

输出：

         【捕获】外层元素被触发

         【目标】内层元素被触发

         【冒泡】外层元素被触发

（2）点击外层元素（.outer）的执行流程：

         触发 outer 的捕获监听器  ->  再次触发 outer 的监听器  ->  无其他注册的监听器，流程结束

输出：

          【捕获】外层元素被触发

          【冒泡】外层元素被触发

注：

     可以通过阻止事件冒泡（ event.stopPropagation() 来改变输出结果。当点击内层元素时，如果在内层元素的事件处理函数中阻止冒泡，外层元素的冒泡阶段监听器将不会触发。

例如：

//内层元素  -  阻止冒泡
inner.addEventListener('click', (e) => {
e.stopPropagation(); // 阻止事件继续冒泡
console.log('【目标】内层元素被触发（冒泡已被阻止）');
});

事件委托

          事件委托（Event Delegation）是 JavaScript 中利用事件冒泡原理，将事件监听器绑定到父元素而非每 个子元素的技术。通过监听父元素，所有子元素的同类事件都会冒泡到父元素处理，从而减少监听器数量，提高性能。（只用在父类上添加监听器，就能实现子类的单个冒泡）