【前端面试】事件冒泡、捕获、委托区别和作用

1. 事件捕获与事件冒泡对比
   • 传播方向和触发顺序：
     • 事件捕获是从DOM树的最外层元素（如document或html）开始，向目标元素传播。也就是说，最外层元素先捕获到事件，然后逐层向内传递，最后目标元素才接收到事件。例如，在一个div包含button的结构中，若设置了事件捕获，当点击button时，先从最外层（假设是document）开始捕获这个点击事件，然后依次向内传递，直到button。
     • 事件冒泡则是从目标元素开始，沿着DOM树向上层元素传播。还是上述结构，当点击button时，首先button自身的事件被触发，然后事件像气泡一样向上层元素（div等）传播。
   • 代码设置区别：
     • 在JavaScript中，使用addEventListener方法为元素绑定事件处理程序时，通过第三个参数来控制是事件捕获还是事件冒泡。如果第三个参数为true，则是事件捕获；如果为false（默认值），则是事件冒泡。例如：

// 事件捕获
document.getElementById('outerElement').addEventListener('click', function () {
    console.log('在事件捕获阶段，外层元素捕获到点击事件');
}, true);
// 事件冒泡
document.getElementById('innerElement').addEventListener('click', function () {
    console.log('在事件冒泡阶段，内层元素捕获到点击事件');
}, false);

这表明事件捕获和事件冒泡是两种不同的事件传播机制，由addEventListener方法的参数决定，而非绑定顺序。

2. 事件捕获与事件委托对比
   • 概念本质：
     • 事件捕获是关于事件传播方向的一种机制，从外向内传播事件。
     • 事件委托是一种事件处理策略，它主要是利用事件冒泡（不是事件捕获）的特性，将事件处理程序绑定在父元素上，用于处理多个子元素的事件。
   • 应用场景和目的：
     • 事件捕获用于在事件到达目标元素之前拦截事件或者对事件进行预处理。例如，在一个复杂的布局中，通过在父元素的事件捕获阶段拦截子元素的某些事件，防止这些事件对整体布局产生不良影响。
     • 事件委托主要用于高效地处理大量子元素的相同类型事件，避免为每个子元素单独绑定事件处理程序。例如，对于一个动态生成的列表，通过在列表元素（父元素）上绑定一个点击事件处理程序，利用事件冒泡来处理所有列表项（子元素）的点击事件。
   • 代码体现：
     • 事件捕获是在绑定事件处理程序时通过设置addEventListener的第三个参数为true来启用。例如：

document.getElementById('parent').addEventListener('click', function () {
    console.log('在事件捕获阶段，父元素捕获到点击事件');
}, true);

    - 事件委托则是在父元素上绑定一个事件处理程序，利用事件冒泡（默认机制），在处理程序中通过`event.target`来判断是哪个子元素触发的事件。例如：

document.getElementById('parent').addEventListener('click', function (event) {
    if (event.target.tagName === 'LI') {
        console.log('一个列表项被点击');
    }
});

从代码可以看出，事件捕获和事件委托是不同的概念，事件捕获关注事件从外向内的传播，事件委托利用事件冒泡在父元素上处理子元素事件，它们的区别不是由绑定顺序决定的。

原文地址：https://blog.csdn.net/qq_41767061/article/details/143895298

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！