JavaScript、イベントの順序
最近のWebサイト・システムではとにかくとにかく「ダイナミック」で、画像・テキストなど至る所にイベントハンドラーが登録されている。
ごく原始的なやり方だと
<img src="foo.jpg" id="img1" onclick="somefunc()">
なんて方法だけど、最近ではprototype.jsのEvent.observeとかを使ってる人も多いと思う。
Event.observeだと
Event.observe('img1','click','somefunc()')
って感じになるけど、このメソッドには第4の引数がある。何に使うかだけど、例えばあるdiv領域の中にもう1つdiv領域があって(divじゃなくてもimgでも何でもいいけど)、それらに共にonclickのイベントハンドラーが設定されている場合、マウスをクリックするとどっちのイベントハンドラーが先に呼ばれるか?
答えは内側の要素に設定されたイベントハンドラーが先に呼ばれるんだけど、第4の引数useCaptureをtrueにするとちょっと違った動作に。とまぁその辺りをコントロールする引数。このページが分かりやすい説明だった。
イベントハンドラーの呼ばれる順序って、最近の動的なWebサイトでは重要だと思うので、この辺りの違いをしっかり理解しておくとよさそう。