Linuxなどのメモ書き

JavaScript addEventListener()


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

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

useCaptureの意味

仕様書を呼んでもわかりにくい、addEventListener()の第3引数useCaptureの意味についてのメモ。


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

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

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

以下に例を示す。図1に示すようなオブジェクトがあり、緑領域、青領域、テキスト領域にそれぞれonmousedownイベントハンドラが設定してあったとする。



図1 HTMLオブジェクト例

この場合、DOM Treeは図2のようになっており、「text」部分をクリックすると「テキスト領域 → 青領域 → 緑領域」の順番にイベントハンドラが呼び出される。ここで、緑領域のイベントハンドラをaddEventListener()でuseCapture = trueにして登録すると、「緑領域 → テキスト領域 → 青領域」の順番で呼び出されることになる。



図2 イベントの伝搬とハンドラの呼び出し



DOM仕様書
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:39:28 - kztomita
(2006/07/08 14:33:56 作成)
添付ファイル
event.png - kztomita
event_propagation.png - kztomita


リンク

その他のWiki
Linuxメモ
Xnuメモ

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

よくやる仕事

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

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

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

検索

Adsense
最近のコメント