イベントモデルの詳しい説明

今回はイベントモデルについて詳しく説明します。イベントを使用する際の注意事項は何ですか?実際の事例を見てみましょう。

IEEventModel (キャプチャなし) (<=ie8)

1. attachEvent(event, function)
   detachEvent(event, function)
   最初のパラメータはon+'event';

2. TargetObjectevent.srcElement;

3. this will point to window;

4. event.cancelBubble = true // バブリングを停止
   event.returnValue = false // デフォルトのイベントをブロックします

標準 DOM イベント モデル (キャプチャ、ターゲット、バブリング) (>ie8)

1. addEventListener(event, function, useCapture)

   removeEventListener(event, function, useCapture)
   useCapture は true、キャプチャ フェーズで実行されます、外側から内側にトリガーされます。
   useCapture は false、バブリングフェーズで実行されます (デフォルト)、内側から外側にトリガーされます。イベント フロー (イベント モニタリングをトリガーするオブジェクトを指します); イベント ストリームのキャプチャ、ターゲット、およびバブリング ステージ内の
   currentTarget (イベント モニタリングを追加するオブジェクトを指します)

   イベント ストリームがターゲット ステージにある場合のみ、 2 つの方向は同じです。
キャプチャ ステージとバブリング ステージでは、target はクリックされたオブジェクトを指し、currentTarget は現在のイベント アクティビティのオブジェクト (通常は親) を指します。

2. thisはイベントリスニングオブジェクトを指します;
   
   
   
   event.stopPropagation() // バブリングを停止します

   event.preventDefault() // デフォルトイベント

3. event.stopImmediatePropagation()を停止します。
イベント
4. 関数の実行を処理し、DOM ツリーにイベントが発生するのを防ぎます。このメソッドはパラメーターを受け入れません。

   
   

5. カスタム イベント

   var event = new Event('自定义事件');// Listen for the event.elem.addEventListener('自定义事件', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);
   CustomEvent 接口可以为 event 对象添加更多的数据；detail属性可用于传递自定义数据：var event = new CustomEvent('自定义事件', { 'detail': elem.dataset.time });
   下面的代码允许你在事件监听器中访问更多的数据：function eventHandler(e) {
     log('The time is: ' + e.detail);
   }

   この記事のケースを読んだ後は、このメソッドを習得したと思います。さらに興味深い内容については、php 中国語 Web サイト
   その他の
関連記事を参照してください。

推奨読書:

イベントループの使用方法

JavaScriptイベントバブリングとイベントキャプチャの実装方法

以上がイベントモデルの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。