domイベントの概要

DOMイベントのレベル

DOM0

element.onclick = function(){
}

DOM2

element.addEventListener('click', function(){
}, false);

DOM3

element.addEventListener('keyup', function(){
}, false);

上記の3番目のパラメータで、trueはイベントがキャプチャフェーズでトリガされることを意味し、falseはイベントがバブリングフェーズでトリガされることを意味します。書き込まれていない場合、デフォルトはfalseです。

DOMイベントモデル、DOMイベントフロー

DOMイベントモデル

• キャプチャ：上から下へ
• バブリング：ボトムアップ

DOM

• 1.キャプチャ：ウィンドウオブジェクトからターゲット要素へのパス
• 2.ゴールステージ：イベントが捕捉され、ターゲット要素に到達。
• 3. バブリング：ターゲット要素からウィンドウオブジェクトへ

DOMイベントキャプチャの具体的な流れ

捕獲の流れ

• 渡す順番は、window --> document --> html --> body --> parent element, child element, target element です。

テスト

window.addEventListener("click", function () {
 alert("キャプチャウィンドウ");
 }, true);
 document.addEventListener("click", function () {
 alert("ドキュメントをキャプチャする");
 }, true);
 document.documentElement.addEventListener("click", function()) {
 alert("htmlをキャプチャする");
 }, true);
 document.body.addEventListener("click", function () {
 alert("本体をキャプチャする");
 }, true);
 fatherBox.addEventListener("click", function () {
 alert("父親をキャプチャする");
 }, true);
 childBox.addEventListener("click", function () {
 alert("子をキャプチャする");
 }, true);

発泡工程

• 逆のプロセス

Eventオブジェクトの共通APIメソッド

デフォルトイベントのブロック

event.preventDefault();

泡立ちを抑える

• w3c

event.stopPropagation();

• IE10

event.cancelBubble = true;

• 互換性のあるライティング

 box3.onclick = function (event) {
 alert("child");
 //バブリングを停止する
 event = event || window.event;
 if (event && event.stopPropagation) {
 event.stopPropagation();
 } else {
 event.cancelBubble = true;
 }
 }

イベント優先度の設定

 event.stopImmediatePropagation();

イベント A とイベント B が同時に登録される 要件： ボタンがクリックされたとき、イベント A のみが実行され、イベント B は実行されない イベント A の応答関数に次の文を追加します。

属性4、属性5（イベントデリゲートで使用）

 event.currentTarget //現在、イベントオブジェクトにバインドされている。イベントデリゲートでは、親要素を参照する。
 event.target //現在クリックされている要素。イベントデリゲートでは、子要素を指す。

カスタムイベント

カスタムイベントのコードは以下の通りです：

 var myEvent = new Event('clickTest');
 element.addEventListener('clickTest', function () {
 console.log('smyhvae');
 });
	//要素登録イベント
 element.dispatchEvent(myEvent); //パラメータは、イベント名clickTestではなく、イベントオブジェクトmyEventであることに注意。

上記のイベントは、定義された直後に自動的にトリガーされます。通常のビジネスでは、このイベントは他のイベントと組み合わせて使われます。例えば、delayerはボタンのアクションを設定します：

 var myEvent = new Event('clickTest');
 element.addEventListener('clickTest', function () {
 console.log('smyhvae');
 });
 setTimeout(function () {
 element.dispatchEvent(myEvent); //パラメータは、イベント名clickTestではなく、イベントオブジェクトmyEventであることに注意。
 }, 1000);

イベント委任

は英語の -ity、-ism、-ization に対応します。

• 同じDOM要素に対して、同じタイプのイベントを複数登録できるようになりました。
• イベントは、イベントキャプチャとイベントバブリングのメカニズムに分けることができます。

実装

• addEventListener(type,listener,useCapture)

type: 必須、String 型、イベントタイプ listener: 必須、関数本体または JS メソッド useCapture: オプション、boolean 型。イベントがキャプチャフェーズで発生するかどうかを指定します。デフォルトはfalseで、イベントはバブリングフェーズで発生します。

利点

• パフォーマンスの向上：各関数にはメモリ領域が必要ですが、イベントハンドラを追加するだけですべてのイベントをプロキシできるため、メモリ領域が少なくて済みます。
• ダイナミックリスニング：イベントデリゲートを使用すると、自動的に動的に追加された要素をバインドすることができます、つまり、新しいノードがアクティブに追加する必要はありませんまた、同じイベントを持つ他の要素と同じにすることができます。