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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

通过捕获，事件首先被最外面的元素捕获并传播到内部元素。

让我们看两个例子。

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

示例

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

1.事件冒泡

document.querySelector('#outer').addEventListener('click', e => {
   console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
   console.log('Inner div is clicked');
}, false);

如果运行上面的代码并单击内部div，则将获得日志-

Inner div is clicked
Outer div is clicked

2.事件捕获

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

如果运行上面的代码并单击内部div，则将获得日志-

Outer div is clicked
Inner div is clicked

以上是 什么是JavaScript中的事件冒泡和捕获？ 的全部内容， 来源链接： utcz.com/z/340997.html

回到顶部