什么是 JavaScript 中的事件冒泡和捕获?

事件冒泡是指当一个元素嵌套在第二个元素中，并且两个元素都为同一事件(例如单击)注册了侦听器时调用事件处理程序的顺序。使用冒泡时，事件首先由最内层元素捕获和处理，然后传播到外部元素。

使用捕获时，事件首先由最外层元素捕获并传播到内部元素。

让我们看看这两个示例。

对于以下两个示例，请创建以下 HTML −

示例

<div id='outer' style='background-color:red;display:inline-block;padding:50px;'>
   外部 Div
<div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'>
   内部 Div
</div>
</div>

1. 事件冒泡

document.querySelector('#outer').addEventListener('click', e => {
   console.log('外部 div 被点击');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
   console.log('内部 div 被单击');
}, false);

如果运行上述代码并单击内部 div，您将获得日志 −

内部 div 被单击

外部 div 被单击

2.事件捕获

document.querySelector('#outer').addEventListener('click', e => {
   console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
   console.log('内部 div 被单击');
}, true);

如果您运行上述代码并单击内部 div，您将获得日志 −

外部 div 被单击

内部 div 被单击

相关文章

• JavaScript RegExp toString() 方法
• JavaScript RegExp test() 方法
• 如何在 JavaScript 中释放内存?
• 如何在 Javascript 中分配内存?
• javascript 中的 Screen 对象是什么?
• 解释 Javascript 中的事件流程
• javascript 中的负无穷大是什么?
• 解释 javascript 防抖动函数?
• 用 javascript 写出 split() 方法的用法?
• 如何在 JavaScript 中将字符串转换为驼峰式大小写?

有用资源

• javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/