Linuxなどのメモ書き

JavaScript addEventListener()


Rev.6を表示中。最新版はこちら

イベントハンドラを登録するaddEventListener()に関するメモ。
IEでは未実装。

useCaptureの意味

addEventListener()の第3引数useCaptureの意味についてのメモ。

通常登録したイベントハンドラ(*1)はバブリングフェーズで呼ばれる。このため、DOM Treeの下の方のエレメントからイベントハンドラが順番に呼ばれる。

useCaptureをtrueにしてイベントハンドラを登録すると、キャプチャフェーズでイベントハンドラが呼ばれるようになる。このため、その他のイベントハンドラに先だって呼び出されるようになる。


(*1) 以下のものが含まれる。
  • DOMエレメントのプロパティに設定したイベントハンドラ(element.onmousedown = handler)
  • TMLタグに埋め込んだイベントハンドラ(<div onmousedown='alert("xxxx");'>)
  • useCapture = falseでaddEventListenerされたイベントハンドラ

以下に例を示す。図1に示すようなオブジェクトがあり、








緑領域、青領域、テキスト領域にそれぞれonmousedownイベントを登録してあるとする。通常イベントハンドラは
テキスト領域→青領域→緑領域
の順で呼び出されるが、緑領域のイベントハンドラをuseCapture = trueで登録すると
緑領域→テキスト領域→青領域
となり、緑が先に呼び出されることになる。



http://www.w3.org/TR/DOM-Level-2-Events/events.html
イベントの伝搬については以下が参考になる。
http://www-06.ibm.com/jp/developerworks/xml/050107/j_x-events.html


最終更新 2006/07/08 15:24:11 - kztomita
(2006/07/08 14:33:56 作成)
添付ファイル
event.png - kztomita
event_propagation.png - kztomita


リンク

その他のWiki
Linuxメモ
Xnuメモ

会社
(有)ビットハイブ
受託開発やってます。

よくやる仕事

・Webシステム開発(LAMP環境)
・Linuxサーバー設定関連
サーバー移転作業代行

開発事例にデジタルカタログ/マンガビューワーを追加しました。

draggable.jsのスマホ対応版デモページを追加しました。説明はこちら

検索

Adsense
最近のコメント