JavaScript のイベント フローとイベント ハンドラーの詳細な説明 (グラフィック チュートリアル)

イベントフローはページからイベントを受け取る順序を指し、イベントハンドラーはイベントへの応答を処理します。次に、JavaScriptのイベントフローとイベントハンドラーについて詳しく説明します。

イベントフロー: 2つのタイプがあります。 , IE は、イベント バブリング ストリームです。イベントは最初に最も具体的な要素から受信され、より具体的なノードに伝播されます (要素 -> ドキュメント)。その逆は、Netscape のイベント キャプチャ ストリームです。

DOM2 レベルのイベントでは、イベント フローにイベント キャプチャ ステージ、ターゲット ステージ、イベント バブリング ステージの 3 つのステージが含まれることが規定されています。

ほとんどの場合、イベント ハンドラーはイベント フローのバブリング フェーズに追加されます。 EventUtil の例:

var EventUtil = {
  addHandler: function(element, type, handler){
    if(element.addEventListener){
      element.addEventListener(type, handler, false);
    }else if(element.attachEvent){
      element.attachEvent('on' + type, handler); // IE8
    }else{
      element['on' + type] = handler;
    }
  },
  removeHandler: function(){...}
}

以下で詳しく見てみましょう:

DOM レベル 0 イベント ハンドラー Javascript を通じてイベント ハンドラーを指定する従来の方法は、関数をイベント ハンドラー属性に割り当てることです。
各要素には独自のイベント ハンドラー属性があり、通常はすべて小文字です (onclick など)。このプロパティの値を関数に設定すると、イベント ハンドラーを指定できます。

var btn = document.getElementById('myBtn');
// 添加事件处理程序
btn.onclick = function () {
  alert( this );//为DOM元素btn
};
// 移除事件处理程序
btn.onclick = null;

長所: 1. シンプル 2. クロスブラウザーの利点
短所: コードが実行される前にイベント ハンドラーが指定されていないため、これらのコードはページ内のボタンの後ろに配置されており、実行されない可能性があります。その結果、ユーザーエクスペリエンスが低下します。

DOM2 レベルのイベント ハンドラー は、イベント ハンドラーの指定と削除の操作を処理するための 2 つのメソッド、addEventListener() とremoveEventListener() を定義します。 3 つのパラメータ、1. 処理されるイベントの名前。 2. イベント ハンドラーとしての関数 3. ブール値。最後のブール値は true (イベント ハンドラーがキャプチャ フェーズ中に呼び出されることを意味します)、false (イベント ハンドラーがバブリング フェーズ中に呼び出されることを意味します) です。

// 添加多个事件处理程序
var btn = document.getElementById('myBtn');
btn.addEventListener('click',function (){
  alert( this );// 为DOM元素btn
},false );
btn.addEventListener('click',function () {
  alert('Hello World');
},false);

// 移除事件处理程序
btn.removeEventListener('click',function () {
  // 匿名函数无法被移除,移除失败
},false);
  // 改写
  var handler = function () {
  alert(this.id);
  };
  btn.addEventListener('click',handler,false);
  // 再次移除事件处理程序
  btn.removeEventListener('click',handler,false);// 移除成功

これら 2 つのイベント ハンドラーは、追加された順序で起動されます。ほとんどの場合、さまざまなバージョンのブラウザーとの互換性を最大限に高めるために、イベント ハンドラーはイベント フローのバブリング フェーズに追加されます。

利点: 1つの要素に複数のイベントハンドラーを追加できます
欠点: IE8以下のブラウザはDOM2レベルのイベントハンドラーをサポートしていません。 (IE8 を含む)

IE イベント ハンドラー は、上記と同様の 2 つのメソッド、attachEvent()、detachEvent() を定義します。どちらのメソッドも、イベント ハンドラー名とイベント ハンドラー関数という同じ 2 つのパラメーターを受け取ります。 IE8 以前のブラウザはイベント バブリングのみをサポートしているため、detachEvent() によって追加されたイベント ハンドラーはバブリング フェーズに追加されます。

var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function(){
  alert( this );// window
});
btn.attachEvent('onclick', funciton(){
  alert("HELLO, WORLD");
});

ボタンをクリックすると、これら 2 つのイベント ハンドラーの起動順序は上記とはまったく逆になります。追加された順序でイベント ハンドラーをトリガーするのではなく、その逆です。

利点: 1つの要素に複数のイベントハンドラーを追加できます
欠点: IEのみをサポートします。

クロスブラウザイベントハンドラー

例:

var EventUtil = {
  addHandler : function ( ele, type, handler ) {
    if ( ele.addEventListener ) {
      ele.addEventListener( type, handler, false );
    } else if ( ele.attachEvent ) {
      ele.attachEvent( 'on' + type, handler );
    } else {
      ele['on' + type] = handler
    }
  },
  removeHandler: function ( ele, type, handler ) {
    if ( ele.removeEventListener ) {
      ele.removeEventListener( type, handler, false );
    } else if ( ele.detachEvent ) {
      ele.detachEvent( 'on' + type, handler );
    } else {
      ele[ 'on' + type ] = null;
    }
  }
}

上記は、皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

JavaScriptの基本的なヒント(画像とテキストのチュートリアル、詳細な回答)

javascriptEL式の値のトラバースリストコレクション

JavaScriptの詳細な分析動作原理 回答

以上がJavaScript のイベント フローとイベント ハンドラーの詳細な説明 (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。