事件冒泡与事件捕获

事件冒泡

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

事件处理顺序：当点击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/

你可能感兴趣的文章