javascriptのEvent流れ（２）
2020-09-01
2020-09-01
前置き
皆さん！こんにちは！久しぶりです！
ワンです！
今回はJavascriptのEvent流れ（２）です！！！
では、勉強してみましょう！
Event Captureって？
今回の始まりはEvent Captureです。Event CaptureはEvent Bubblingとは逆方向に進むEvent伝送方式です。
上図のように、特定のeventが発生した時に最上位要素である body タグから該当タグを探します。では、Event Captureはコードでどのように実装するのでしょうか？
```
<body>
<div class='one'>
<div class='two'>
<div class='three'>
</div>
</div>
</div>
</body>
var divTag = document.querySelectorAll('div');
divTag.forEach(function (div) {
div.addEventListener('click', showTag, {capture: true}); //default値はfalseです
});
function showTag(event) {
console.log(event.currentTarget.className);
}
```
このように、addEventListener APIのオプションオブジェクトに「capture:true」を設定すればOKです。
すると、そのEventを検知するためにEventBubblingと反対方向に探索します。
したがって、前回の記事にあったEventBubblingと同様に
<div class="three"><div>をクリックしても以下のような結果が現れます。
難しい！要素のEventだけ知ってはいけませんか？
「複雑なEventの伝達方法を知りたくなくて、ただ必要な画面要素のEventだけ、気にしたい」と考えるかもしれません。その場合は、以下のようにstopPropagation APIを使います。
```
function showTag(event) {
event.stopPropagation();
}
```
上記APIは、該当Eventの伝播を防ぎます。
したがって、EventBubblingの場合にはクリックした要素のEventだけを発生させ、
上位要素にEventを伝えることを妨げます。 そしてEventCaptureの場合は、
クリックした要素の最上位要素のEventだけを動作させ、下位要素としてEventを伝達しません。
上記のようにstopPropagation APIを使ったら、
「EventBubbling例題」と「EventCapture例題」で使ったコードの結果は、
それぞれ「three」と「one」だけ表示されますね。
最後に
今日はここまで、EventCaptureとまで紹介いたしました。次はこの流れシリーズの最終：Event Delegationです！
では！🙇♂️