高级事件操作，提升你的 API 技能

API 里的事件，有哪些你不知道的高级玩法？

了解了 DOM 中的事件后，我们再来看下 API 中的事件。

1. 事件冒泡

在嵌套的 DOM 中，事件会从最内层元素，向外层逐层冒泡。例如：

<div onclick="outer(event)">
    <p onclick="inner(event)">点击我</p>
</div>

当点击 <p> 元素时，inner 和 outer 两个函数都会被调用。

利用事件冒泡，我们可以：

• 减少事件监听器： 只在最外层元素上添加监听器，即可处理所有子元素的事件。

• 事件代理： 动态添加/删除子元素的事件监听器，避免频繁操作 DOM。

const div = document.querySelector('div');
        
div.addEventListener('click', function(event) {
    const target = event.target;
    // 根据 target 判断事件来源，再进行处理
});

2. 事件捕获

事件捕获和事件冒泡相反，是从最外层元素，向内层逐层捕获。很少使用，因为它会影响事件冒泡的顺序。

3. 事件委托

事件委托结合了事件冒泡和事件代理，在性能和灵活性上更胜一筹。

const div = document.querySelector('div');
        
div.addEventListener('click', function(event) {
    const target = event.target;
    // ...
}, true); // 设置 capture 为 true，启用事件捕获

4. 阻止事件传播

使用 event.stopPropagation() 方法，可以阻止事件向上冒泡或向下捕获。

const p = document.querySelector('p');
        
p.addEventListener('click', function(event) {
    event.stopPropagation(); // 阻止事件冒泡
});

5. 事件对象

每个事件都会触发一个事件对象，里面包含了事件的相关信息，如：

• type：事件类型

• target：事件目标元素

• clientX/clientY：鼠标指针位置（相对于窗口）

• keyCode：按下的键盘键码

6. 自定事件

我们可以使用 EventTarget 和 CustomEvent 创建自定事件。

const myEvent = new CustomEvent('myEvent', { detail: { foo: 'bar' } });
        
window.dispatchEvent(myEvent);

通过监听 myEvent 事件，可以处理自定事件。

7. 事件监听器选项

在添加事件监听器时，我们可以设置 options 参数：

• capture：控制事件捕获或冒泡

• once：事件只触发一次就自动移除监听器

• passive：优化滚动性能，在滚动事件中禁用 preventDefault()

window.addEventListener('scroll', function(event) {}, { passive: true });

掌握这些高级事件技巧，可以让你的代码更灵活、高效，在复杂交互场景中游刃有余。