JavaScript - イベントハンドラとリスナーの違いは何ですか？

Question

JavaScriptのイベントハンドラとイベントリスナの違いは何ですか？イベントが発生したときに両方とも関数を実行します。 イベントハンドラを使用するタイミングとイベントリスナを使用するタイミングは実際にはわかりません。

Answer 1

違いはありません。それは同じことのためのちょうど異なる用語です。

イベントハンドリングの目的で、関数をDOM要素に関連付ける方法はさまざまです。標準がフラックスになったとき（または単に実装者が厄介で困難なとき）、差異は現れたが、最終的には基本的に同じである。あなたは、イベントハンドラの登録の並べ替えに使用するかについて混乱している場合は

、次のことができます。

• Read more about the topic、おそらくブラウザ・バイ・ブラウザ毎に、使用するアプローチを選択してください。
• 人気のJavaScriptフレームワークの1つを選択して、ハンドラ

Answer 2

ハンドラとリスナーを取り付けるためのメカニズムを使用するのと同じである1 - イベントを処理する機能のためだけの同義語。 「ハンドラ」はおそらくより受け入れられた用語であり、確かに私にとってより意味的に正しいものです。用語「リスナー」要素にイベントを追加するために使用されるコードから導出される：

element.addEventListener('click', function() { /* do stuff here*/ }, false); 

あなたは、しかし、本当にnitpicky得ることができ、別の意味にダウン2を破ります。あなたが傾けている場合、 "ハンドラー"は、 "リスナー"を追加するときにイベントを処理する関数の言葉であり、したがって、単一の "ハンドラー"を利用するいくつかの "リスナー"を持つことができます。考えてみましょう：

// handler is synonymous with function 
function someFunction(e) { 
    if (typeof e == 'undefined') 
    alert('called as a function'); 
    else 
    alert('called as a handler'); 
} 


// use someFunction as a handler for a 
// click event on element1 -- add a "listener" 
element.addEventListener('click', someFunction, false); 
// use an anonymous function as a handler for a 
// click event on element1 -- add another "listener" 
element.addEventListener('click', function() { alert('anonymoose'); }, false); 


// use someFunction as a handler for a 
// click event on element2 -- add a "listener" 
element2.addEventListener('click', someFunction, false); 

// call someFunction right now 
someFunction(); 

は、したがって、上記のコードでは、私が2、「ハンドラ」（someFunctionと匿名関数）と3「リスナー」を持っています。

この場合も、これはすべてのセマンティクスです。すべての実用的な目的で、リスナーとハンドラという用語は同じ意味で使用されています。区別が必要な場合は、リスナーは、ハンドラ（ファンクション）へのコールをトリガーするイベントへのサブスクリプションです。

泥が澄んでいますか？