DOMイベントの順序:キャプチャvsバブリング
イベントの伝播には2つの段階があります。これらは「キャプチャ」および「バブリング」と呼ばれます。
| | / \
---------------| |----------------- ---------------| |-----------------
| 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