JavasScriptのイベント処理のベストプラクティスは？ JavaScript呼び出しを定義する場合

Question

、そのような：

<input type="button" onclick="someJavaScriptFunction" /> 

実際の呼び出しを記述するための最良の方法は何ですか？いずれかの方法を任意のメリットや注意点はあります

javascript:someJavascriptFunction(); 

または

justSomeJavaScriptFunction(); 

または

withoutTheSemicolon() 

：私は、多くの方法を見てきましたか？特定のケースでは、addEventListenerを使用するほうが柔軟性があることを認識しています。

Answer 1

ベストを練習する場合は、スクリプトの内容とは別にマークアップしてください。イベントハンドラをscript要素に割り当てます。あなたが言うように、addEventListenerを使用すると、あなたが同様にattachEventを使用する必要がありますが、あなたはバージョン9

前のInternet Explorerのバージョンをサポートしたい場合にはoneventプロパティを割り当てるために、しかし、完全に有効ですが、これを行う1つの方法です。たとえば：

<script> 
    window.onload = function() { 
     document.getElementById('yourID').onclick = function() { 
      alert('element clicked'); 
     }; 
    }; 
</script> 

これは、少数のアイテムしか持っていない場合、適切に目的に合っている可能性があります。

Answer 2

セミコロンは違いはありませんあなたがそうのような複数の機能を追加するためにセミコロンを使用することができますので、しかしイベントは実際にはJavaScriptのラインだけではなく関数名であるとか、なし：

<input type="button" onclick="function1();function2();function3();" /> 

私はていないことを確認ジャバスクリプト：すべてで動作しますが、それはあなたがリンク上のhrefとしてではなく、以下のようなイベントハンドラとしての機能を付けるだけの場合です：

<a href="javascript:function1();function2();function3();" >A link</a> 

Answer 3

javascript:someJavascriptFunction();明示的にそのような場合には、JavaScriptを使用して状態複数の/異なるscrを持つ可能性がありますECMAスクリプトなどのiptsタイプ。あなただけではなく複数のスクリプトタイプを持つよりも、（自分のページ上のJavascript（複数可）を持っている場合。チェーン/に使用

someJavascriptFunction();doSomethingElse();return false;セミコロンは複数の文を持っている

someJavascriptFunction()は大丈夫です。

のでノーあり「最良」の方法は、単に何が最も理にかなっている、と（ほとんどの場合）お好みの慣例である。

Answer 4

javascript:someJavascriptFunction(); 

我々はhref属性やブックマークアドレスFiの中でURLとしてjavascript:を使用led（ブックマークレット）。たとえば ：

<a href="javascript:myFunction()">click me</a> 

我々は1つのJavaScript命令以上のものを添付するセミコロンを使用します。

<span onclick="alert('first');alert('second')">click me</span> 

addEventListenerは、同じイベントに多くの機能を添付することができます：

element.addEventListener ('click', firstFunction); 
element.addEventListener ('click', secondFunction); 

Answer 5

のベストプラクティスそのものJavaScript自体を使用してイベントを添付することです：

Firefoxの、クロム、サファリ、オペラ...

document.getElementById('someID').addEventListener('click', function() { 
    function1(); 
    function2(); 
    function3(); 
}); 

IE：

document.getElementByID('someID').attachEvent('onclick', function() { 
    function1(); 
    function2(); 
    function3(); 
}); 

はそれが仕事を得るために2つを組み合わせます。

また、これをさらに簡単にするために、MooToolsやJQueryのようなフレームワークを使用してください。

Answer 6

addEventListenerが最適な方法です。