DOM 事件和 React 事件的区别,如何正确的阻止冒泡
DOM 的事件一般会先后经历捕获与冒泡两个阶段,捕获事件是沿着 DOM 树由上往下传递,到达触发事件的元素(target)后,事件开始冒泡,沿着 DOM 树继续向上传递。
IE 9 之前的只支持冒泡
以这段代码为例:
<div class="outer">
<div class="inner">
inner
</div>
</div>
如果点击了 inner,事件是如何传递的呢?
在事件捕获的机制下,发生 click 的顺序是:
document -> body -> outer -> inner
在事件冒泡的机制下,发生 click 的顺序是:
inner -> outer -> body -> document
那么是不是捕获和冒泡都会执行呢?这和你对事件的定义相关。
在 DOM2 级事件中,事件流同时支持了事件捕获阶段和事件冒泡阶段,作为开发者可以选择事件处理函数在哪一个阶段被调用。
addEventListener(event, handler, useCapture)
在 addEventListener
方法的第三个参数接收一个 bool 值,可以选择当前注册的事件在哪一个阶段被执行。
useCapture 可选值:
- true,事件捕获阶段执行
- false(默认值),事件在冒泡阶段执行
阻止事件冒泡
在前端编写页面的时候,经常会遇到弹窗的场景,如果对弹窗里的元素绑定了事件,通常我们需要阻止这个事件的冒泡,否则会触发弹窗下面的元素的事件。
阻止事件冒泡有三种方式:
1、子元素加上 e.stopPropagation()
,事件不会继续冒泡传递。
element.addEventListener('click'