JSイベントをリンクにバインドする最も良い方法は何ですか？

Question

何が最良の方法で、なぜですか？

Href？

<a href="javascript:helloworld()">link</a> 

onclick？

<a href="#" onClick="helloworld()">link</a> 

フレームワーク（たとえばjquery）でバインドしますか？

<a id="foo" href="#">link</a> 
… 
$('#foo').live('click',helloworld); 

Answer 1

です。通常は、は決してには何もしないリンクがあります。ユーザーがJavaScriptを無効にした場合、または読み込みに失敗した場合はどうなりますか？あなたはアクセシブルなウェブサイトを持って正常に低下する必要があります。あなたはアヤックスでロードボックスを持っているのであれば、たとえば、あなたはそれが邪魔にならず、別のJavaScriptでハンドラをバインドし、その後、別のページにリンクする必要があります：

<a class="loadPage" href="actualPage.php">Go to my page</a> 

とで別のファイル：

リンクはJavaScriptで生成された場合

$('.loadPage').click(function(e) { 
    // Load with Ajax... 
    e.preventDefault(); // Stop the link from going through 
}); 

、それはhrefとして、ほとんどの時間を#を使用しても大丈夫です。ただし、その場合はonclickをinnerHTML（* shudder *）に設定するのではなく、JavaScriptを使用してハンドラーを取り付ける必要があります。

したがって、一般的に：生産コードにonclick属性またはjavascript:リンクがある場合は、HTML内でコンテンツ、動作、およびプレゼンテーションを分離していません。あなたはアクセス可能ではありません。あなたは意味論的ではありません。しないでください！

Answer 2

上記以外のものはありません。

JSを外部ファイルに保存しておくと、ライブラリを使用することで、標準のイベントバインディングをサポートするブラウザとInternet Explorerの古いバージョンをサポートするブラウザの違いがスムーズになります。

ただし、JavaScriptはunobtrusiveである必要があります。あなたはページの上部へのリンクから始めるべきではありません。

Answer 3

「javascript：myaction（）」は使用しないでください。

実際のバインド（ブラウザウィンドウにイベントを登録することを意味する）を作成するので、常にフレームワークの使用を優先します。 そのためには、 $（ '＃foo'）。live（ 'click'、function（）{my action ....}）;

また、JavaScriptを別のファイルに保存することもできます。これは、スクリプトを処理するためのベストプラクティスです。

次善の方法は、onClickイベントを使用することです。

Answer 4

HTMLマークアップでjavaScriptを使用しないでください！また、決してlive()を使用しません

$(function() { 
    var foo = $('#foo'); 

    if(foo[0]) { 
     foo.click(function(event) { 
      //.. 
      event.preventDefault(); 
     }); 
    } 
}); 

または使用on()jQuery 1.7+以来

foo.on('click', function(event) { 
    //.. 
    event.preventDefault(); 
}); 

（ jQuery 1.7のとおり、 .live()方法が推奨されていません）！