javascript - OnclickとaddEventListener

Question

HTML要素のプロパティとして「onclick」「onmousedown」を使用することで少し混乱します。

そのような：

<button onclick="my_JS_function()"></button>

また

<div onmousedown="my_another_JS_funciton"></div>

しかし、「リスナー」を追加する「適切な」方法は

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);

それを行うためのより「適切な」よりサポートされた方法は何ですか？

score 12 · Accepted Answer

関数と要素がhtmlの一部であることがすでにわかっている場合、つまり動的に追加されない場合は、「addEventListener」などの追加のメソッド呼び出しを使用するのではなく、関数をインラインで追加する方が良い

注意すべきもう一つのこと

onclick はすべてのブラウザで機能しますが、addEventListener は古いバージョンの Internet Explorer では機能せず、代わりに attachEvent を使用します。

OnClickはDOM レベル 0のプロパティです。AddEventListenerは、DOM レベル 2定義の一部です。これについて読んでください: http://www.w3.org/TR/DOM-Level-2-Events/events.html

HTML タグ属性として追加されたインラインイベントハンドラー。次に例を示します。

 <a href="gothere.htm" onlick="alert('Bye!')">Click me!</a>

上記の手法は単純ですが、特定の欠点があります。要素ごとに 1 つのイベントハンドラーしか持てません。さらに、インラインイベントハンドラーを使用すると、JavaScript コードと HTML マークアップの分離が非常に不十分になります。

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);

この利点: 複数のイベントハンドラーを追加できます。また、htmlとjavascriptコードを分離します

詳細については、これを読むことができます:イベントハンドラの追加

score 4 · Accepted Answer

addEventListener()同じタイプの複数のイベントを同じ要素にアタッチできるため、後者（）が最適な方法です。

などに割り当てることによりonclick、既存のハンドラーを上書きします。

2 に答える 2