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サイトでは重要だと思うので、この辺りの違いをしっかり理解しておくとよさそう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です