下記の参考書を進めてきて、ついに7章に突入し読了が近づいてきた。
JavaScript本格入門 山田祥寛著
そんな中ずっと気になっていたことがあった。
//記入例
document.getElemetById('hoge').addEventListener('click',function() {
},false);
そう、addEventListenerの第三引数、falseってなんだ？？
「7章まできて、そんなこともわかっていなかったのか!!」
本書では、addEentListenerメソッドについて下記のように記載されていた。
elem.addEventListener(type, listener, capture)
elem:要素オブジェクト
type:イベントの処理
listener:イベントに応じて実行すべき処理
capture:イベントの方向
引用元:JavaScript本格入門 p299 山田祥寛著
今回知りたいのは、第三引数、captureについてだ。
captureはイベントの方向を指定するためのものらしい。
「イベントの方向とはなんぞや」と言うことで、本書で指定されたp347を見ると、イベントの伝搬つまり、イベント処理が呼び出されるまでのプロセスが関係しているっぽい（むずよー）。
まず、イベントの伝搬は次のようなフェーズを辿っているそうだ。
1.キャプチャフェーズ
2.ターゲットフェーズ（イベント発生!）
3.バブリングフェーズ
通常(第3引数がfalse)の場合だと、「イベントの発生元から上位ノード」へと処理が進む、つまりバブリングフェーズでイベントは処理されるそう。
だから、この第三引数をtrueにすることで、「上位ノードからイベントの発生元」と方向が逆になり、
キャプチャフェーズでイベントが処理されるようになると言うことだそうだ。
今回の目的であった、addEventListenerメソッドの第三引数の意味は最初よりはイメージできたが
実際に現場でこれらをどういった場面で使い分けるのかと行ったことは、まだイメージできなかった。
まあ、それは今後わかっていけばいいかなー笑。これだから最近の若者は...。