キャプチャリングフェーズを使うべし
キャプチャリングフェーズとは何か
キャプチャリングフェーズを理解する前に、まずはバブリングフェーズを理解する必要があります。
test.html
<form onclick="alert('form')">
<div onclick="alert('div')">
<p onclick="alert('p')"></p>
</div>
</form>
バブリングフェーズとは、例えば、上記のようにform > div > p
の順番で要素が入れ子になっていた場合、p要素を押下すると、アラートは
- p
- div
- form
の順番で実行されます。
泡のようにイベントが内部の要素から親に向かって実行されていくので、バブリングフェーズと呼ばれています。
何もしないとイベントは基本的にバブリングフェーズに登録されます。
キャプチャリングフェーズはその逆で、親要素から内部に向かって実行されるフェーズのことを言います。
- バブリングフェーズに登録されたイベントより、キャプチャリングフェーズに登録されたイベントの方が早く実行される
上記の特性を利用して、イベントを早めることが出来ます。
キャプチャリングフェーズを使用するには、addEventListenerの第二引数にtrueを渡すだけです。
addEventListener(event, true)
キャプチャリングフェーズを使ってみよう
まずは、キャプチャリングフェーズを使っていない場合
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p style="height:300px; width:300px; background:red;" id="P"></p>
</body>
</html>
<script>
document.getElementById('P').addEventListener('click',function() {
alert("1個目のP")
})
document.getElementById('P').addEventListener('click',function() {
alert("2個目のP")
})
</script>
上記をそのまま実行すると、「1個目のP」が先に実行されて、その後に「2個目のP」が実行されています。
では、キャプチャリングフェーズを使用した場合はどうなるのか
「2個目のP」のイベントをキャプチャリングフェーズに登録します。
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p style="height:300px; width:300px; background:red;" id="P"></p>
</body>
</html>
<script>
document.getElementById('P').addEventListener('click',function() {
alert("1個目のP")
})
document.getElementById('P').addEventListener('click',function() {
alert("2個目のP")
}, true)
</script>
今度は、キャプチャリングフェーズに登録された「2個目のP」のイベントの方が先に実行されています。
上記のことから、バブリングフェーズよりキャプチャリングフェーズを利用したほうが、イベントが早く実行されることが分かりました。
参考