事件冒泡与事件捕获

事件冒泡

事件冒泡是指当点击某个元素时，由目标元素开始向上冒泡，依次触发父元素的点击事件。具体而言，点击子元素会向祖先元素依次触发事件。以下示例展示了事件冒泡的工作原理：

事件处理顺序：当点击box元素时，会依次触发以下事件：

box的点击事件

wraper的点击事件

content的点击事件

// 事件冒泡示例
const box = document.querySelector('.box');
const wraper = document.querySelector('.wraper');
const content = document.querySelector('.content');
box.addEventListener('click', (e) => {
    console.log('box冒泡');
}, false); // 事件冒泡使用false参数
wraper.addEventListener('click', (e) => {
    console.log('wraper冒泡');
}, false);
content.addEventListener('click', (e) => {
    console.log('content冒泡');
}, false);

事件捕获

事件捕获的特点是事件处理顺序相反，事件从目标元素开始，从上到下触发。与事件冒泡相比，仅需将事件监听的第三个参数设置为true即可实现。

// 事件捕获示例
box.addEventListener('click', (e) => {
    console.log('box捕获');
}, true); // 事件捕获使用true参数
wraper.addEventListener('click', (e) => {
    console.log('wraper捕获');
}, true);
content.addEventListener('click', (e) => {
    console.log('content捕获');
}, true);

事件冒泡与捕获的优先级

在同一个元素上注册多个事件时，事件捕获会优先于事件冒泡执行。以下示例展示了事件处理顺序：

// 事件捕获
box.addEventListener('click', (e) => {
    console.log('box捕获');
}, true);
wraper.addEventListener('click', (e) => {
    console.log('wraper捕获');
}, true);
content.addEventListener('click', (e) => {
    console.log('content捕获');
}, true);
// 事件冒泡
box.addEventListener('click', (e) => {
    console.log('box冒泡');
}, false);
wraper.addEventListener('click', (e) => {
    console.log('wraper冒泡');
}, false);
content.addEventListener('click', (e) => {
    console.log('content冒泡');
}, false);

结果显示，事件捕获先于事件冒泡执行。

阻止事件捕获与冒泡

要阻止事件捕获或事件冒泡，可以使用e.stopPropagation()方法。以下示例展示了如何阻止事件传播：

// 阻止事件捕获和冒泡
box.addEventListener('click', (e) => {
    e.stopPropagation();
    console.log('box冒泡');
}, false);
wraper.addEventListener('click', (e) => {
    console.log('wraper冒泡');
}, false);
content.addEventListener('click', (e) => {
    console.log('content冒泡');
}, false);

需要注意的是，IE浏览器的事件对象与其他浏览器存在差异，建议在跨浏览器开发时谨慎使用.stopPropagation()方法。

转载地址：http://nkhwz.baihongyu.com/

你可能感兴趣的文章