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

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

亚连

リリース： 2018-05-21 13:47:26

オリジナル

1705 人が閲覧しました

イベントフローはページからイベントを受け取る順序を指し、イベントハンドラーはイベントへの応答を処理します。次に、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(&#39;on&#39; + type, handler); // IE8
    }else{
      element[&#39;on&#39; + type] = handler;
    }
  },
  removeHandler: function(){...}
}

ログイン後にコピー

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

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

var btn = document.getElementById(&#39;myBtn&#39;);
// 添加事件处理程序
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(&#39;myBtn&#39;);
btn.addEventListener(&#39;click&#39;,function (){
  alert( this );// 为DOM元素btn
},false );
btn.addEventListener(&#39;click&#39;,function () {
  alert(&#39;Hello World&#39;);
},false);
 
// 移除事件处理程序
btn.removeEventListener(&#39;click&#39;,function () {
  // 匿名函数无法被移除,移除失败
},false);
  // 改写
  var handler = function () {
  alert(this.id);
  };
  btn.addEventListener(&#39;click&#39;,handler,false);
  // 再次移除事件处理程序
  btn.removeEventListener(&#39;click&#39;,handler,false);// 移除成功

ログイン後にコピー

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

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

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

var btn = document.getElementById(&#39;myBtn&#39;);
btn.attachEvent(&#39;onclick&#39;, function(){
  alert( this );// window
});
btn.attachEvent(&#39;onclick&#39;, 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( &#39;on&#39; + type, handler );
    } else {
      ele[&#39;on&#39; + type] = handler
    }
  },
  removeHandler: function ( ele, type, handler ) {
    if ( ele.removeEventListener ) {
      ele.removeEventListener( type, handler, false );
    } else if ( ele.detachEvent ) {
      ele.detachEvent( &#39;on&#39; + type, handler );
    } else {
      ele[ &#39;on&#39; + type ] = null;
    }
  }
}