今回は、前回に引き続き JavaScript でプログラムを書くときに是非知っておきたい 「イベントバブリング」 のお話の続きです。
え？イベントバブリングってなんだ？
あなたは、前回のブログを読んでませんね？
こちらを読んでください！
JavaScript の基礎を身につけよう！ ～ イベントのバブリング
一言で言えば、「イベントは DOM の階層を登っていく。これを一言で 『イベントバブリング』 という」 のです。
前回 の例では P タグの中に SPAN タグで文字を書き、P タグ、SPAN タグ、そして document そのもの全てに click イベントリスナーを設定しました。この時に span をクリックすると、
document のイベントハンドラ
↑
p のイベントハンドラ
↑
span のイベントハンドラ
という風に、末端の要素のイベントから先に順番にイベントハンドラが呼び出されていくのでしたね。
ここまで、前回の復習です。
今日のお題は、「イベントバブリングを止める」 です。
上の例では、span → p → document という順にイベントハンドラが呼び出されました。このとき、このイベントハンドラの呼び出し連鎖を途中で止めることができます。
前回の例で、document のイベントハンドラを呼び出したくない場合は、p のイベントハンドラで次のように書きます。
function p1_onclick(evt){
...
Event.stop(evt);
...
}
尚、私のコードサンプルは prototype.js を使うことを前提としています。prototype.js を使わないと、イベントバブリングを止めるだけでも、Firefox と IE ではコードが別れてしまいます。しかし、prototype.js を使えば、上記のように一行で OK です。ブラウザの違いを吸収するためにも prototype.js は是非活用しましょう！
それではまた！