javascriptのEvent流れ（１）
前置き
皆さん！こんにちは!
久しぶりです！
ワンです！
最近、新型コロナが流行ってますね。。😢
早く落ち着いておしいです！
皆さんもぜひ、マスクと手洗いを！
では、今回はJavasciptでEventの流れに対して勉強しましょう！
Event登録
皆さん、ご存知通りwebApplicationのEventの登録です！
ここで言ってるEvent登録はユーザーの入力が必要なところです！
下のコードをみましょう。
```
<button> Item追加 </ button>
var button = document.querySelector ( 'button');
button.addEventListener ( 'click', createItem);
function createItem (event) {
console .log (event);
}
```
「Item追加」という簡単なボタンを作りました。クリックした時「createItem」というfunctionを実行します。
ボタンをクリックした後、「createItem」が実行されて「createItem」functionが「Event」parameterをもらいます。
このように「addEventListener」みたいなWebAPIはユーザーの入力によってEventを作れます。
では、ここでブラウザはEventの発生をどうやって感知していると思いますか。
これから、やってみましょう！
Event Bubblingって？
「Event Bubbling」は特定の画面要素からEventが発生する時、そのEventがもっと上の画面要素に伝達されていく特性と言います。
下の絵をご覧ください
＊ 上位の画面要素とは? HTML 要素は、基本的にツリー構造を持ちます。
＊ ここではツリー構造上、一段階上にある要素を上位要素と呼び、bodyタグを最上位要素と呼びます。
例を挙げます。三つのdivタグがあって一番下にあるdivタグからEventが発生した時、
最上位要素のbodyタグまでEventが伝達させてます。→ もちろん、コードで
```
<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);
});
function showTag(event) {
console.log(event.currentTarget.className);
}
```
上のコードは三つのdivタグにクリックEventを登録し、クリックした時showTagを実行させます。
ここで、一番下位divタグをクリックしたら
が出ます。divタグは一個クリックしたのに、なぜ、三つのEventが発生するんでしょうか？
その理由はブラウザがEventを感知する方法のためです。
ブラウザは、特定の画面要素でEventが発生した時、そのEventを最上位の画面要素までEventを伝播させます。
したがって、class名が「three」→「two」→「one」の順序でdivタグに登録されたEventが実行されます。
同様に、「two」classを持ってる2番目のタグをクリックしたら、「two」→「one」の順にクリックEventが動作します。
ここで注意すべき点は、タグごとにEventが登録されているので、上位要素にEventが配信されることを確認できます。
もしEventが特定のdivタグにしか移っていなければ、上記のような動作結果は確認できませんでしょうね？
このような下位から上位要素へのEvent伝播方式を「Event Bubbling」といいます。
最後に
今日はここまで、Eventの発生、EventBubblingまで紹介いたしました。
次はEventCaptureに対してやってみましょう！
では！