按照DOM事件的顺序:CAPTURING与BUBBLING
事件如何传播分为两个阶段。这些被称为“捕获”和“冒泡”。
| | / \
---------------| |----------------- ---------------| |-----------------
| element1 | | | | element1 | | |
| -----------| |----------- | | -----------| |----------- |
| |element2 \ / | | | |element2 | | | |
| ------------------------- | | ------------------------- |
| Event CAPTURING | | Event BUBBLING |
----------------------------------- -----------------------------------
捕获阶段首先发生,然后是冒泡阶段。当您使用常规DOM api注册事件时,默认情况下,事件将成为冒泡阶段的一部分,但是可以在事件创建时指定
// CAPTURING event
button.addEventListener('click', handleClick, true)
// BUBBLING events
button.addEventListener('click', handleClick, false)
button.addEventListener('click', handleClick)
在React中,冒泡事件也是默认情况下使用的事件。
// handleClick is a BUBBLING (synthetic) event
<button onClick={handleClick}></button>
// handleClick is a CAPTURING (synthetic) event
<button onClickCapture={handleClick}></button>
让我们看一下handleClick回调(React):
function handleClick(e) {
// This will prevent any synthetic events from firing after this one
e.stopPropagation()
}
function handleClick(e) {
// This will set e.defaultPrevented to true
// (for all synthetic events firing after this one)
e.preventDefault()
}
我这里没有提到的替代品
如果在所有事件中都调用e.preventDefault(),则可以检查事件是否已被处理,并防止再次处理该事件:
handleEvent(e) {
if (e.defaultPrevented) return // Exits here if event has been handled
e.preventDefault()
// Perform whatever you need to here.
}
有关合成事件和本地事件之间的区别,请参见React文档:https : //reactjs.org/docs/events.html