JavaScript イベントバインディングの一般的な方法とその利点と欠点の分析に関する簡単な説明

従来の方法

element.onclick = function(e){
 
   // ...
 
 };

1. 従来のバインディングの利点

は非常にシンプルで安定しており、使用するさまざまなブラウザーで一貫して動作することが保証されます

イベントを処理するとき、this キーワードは現在の要素を参照します。これは非常に役立ちます

2. 従来のバインディングの欠点

従来のメソッドは、キャプチャとバブリングではなく、イベント バブリングでのみ実行されます

要素は一度に 1 つのイベント ハンドラーにのみバインドできます。新しくバインドされたイベント処理関数は、古いイベント処理関数を上書きします

イベント オブジェクト パラメーター (e) は、IE 以外のブラウザーでのみ使用できます

W3C メソッド

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

1 W3C バインディングの利点

これ。メソッド イベント処理のキャプチャ フェーズとバブリング フェーズもサポートします。イベント ステージは、addEventListener の最後のパラメータ設定、false (バブル) または true (キャプチャ) によって異なります。

イベント ハンドラー関数内で、 this キーワードは現在の要素を参照します。

イベント オブジェクトは、ハンドラー関数の最初の引数 (e) を介して常にキャプチャできます。

以前にバインドされたイベントを上書きせずに、同じ要素に複数のイベントをバインドできます

2. W3C バインディングの欠点

IE はサポートしていないため、代わりに IE のattachEvent 関数を使用する必要があります。

IEメソッド

element.attachEvent('onclick', function(){
 
    // ...
 
  });

1. IEメソッドの利点

以前にバインドされたイベントを上書きすることなく、同じ要素に必要な複数のイベントをバインドできます。

2. IE メソッドの欠点

IE はイベント キャプチャのバブリング フェーズのみをサポートします

イベント リスニング関数の this キーワードは、現在の要素ではなくウィンドウ オブジェクトを指します (IE の大きな欠点)

イベント オブジェクトのみ window.event パラメーターに存在するイベントは、ontype の形式で名前を付ける必要があります (たとえば、click ではなく onclick)。これは IE でのみ使用できます。 IE 以外のブラウザでは W3C の addEventListener

Dean Edwards のソリューション (addEvent/removeEvent ライブラリ) を使用する必要があります

1 addEvent

の利点は、サポートされていない古いブラウザであっても、すべてのブラウザで動作します

このキーワードは次のとおりです。すべてのバインディング関数で使用され、現在の要素を指します

ブラウザのデフォルトの動作を妨げ、イベントのバブリングを防ぐさまざまなブラウザ固有の関数をすべて無効化します

ブラウザの種類に関係なく、イベント オブジェクトは常に最初のオブジェクトとして渡されます

2. addEvent の欠点

はバブリングフェーズでのみ機能します (イベントバインディングの従来の方法を深く使用しているため)