イベントリスナーを使うときに理解しておきたいこと
公開日：みなさんはJavaScriptのイベントについてちゃんと理解していますか？
なんとなく使えているかもしれませんが、たまに度ツボにはまってしまったり、どうしても思った通りの動作にならないことはありませんか？
ぼくは今までなんとなくで使っていましたが、イベントの伝播というものが分かるようになって、よりよいコードが書けるようになった気がするのでご紹介します。
イベントターゲットの親要素のイベントリスナーも呼び出される
イベントの対象の要素のことをイベントターゲットといい、基本的にはこのイベントターゲットを想定してイベントリスナーを設定することが多いと思いますが、イベントターゲットの親要素にリスナーを設定することで同時に、その親要素に対してなにか処理をすることも出来るのです。
ここで、ひとつ疑問が浮かぶかもしれません。どちらが先に実行されるのか？
下の画像の順でイベントリスナーが呼び出されます。
windowから子要素に降りていき、ターゲットに行った後で、もう一度windowまでたどっていきます。
つまり、親要素については2つのタイミングを選ぶことが出来ます。
2つのタイミングの選び方ですが、イベントリスナーの第三引数に真偽値を指定することで決めることが出来ます。
trueの場合は、キャプチャーフェーズで、falseの場合はバブリングフェーズで呼び出されます。
ちなみに、初期値はfalseなので、なにも指定しなかった場合はバブリングフェーズで、ということになります。
