[解決済み] jQuery.click()とonClickの比較

質問

私は巨大なjQueryアプリケーションを持っており、クリックイベントに対して以下の2つのメソッドを使用しています。

最初の方法

HTML

<div id="myDiv">Some Content</div>

jQuery

$('#myDiv').click(function(){
    //Some code
});

第二の方法

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

JavaScriptの関数呼び出し

function divFunction(){
    //Some code
}

私のアプリケーションでは、1つ目の方法と2つ目の方法のどちらかを使用しています。どちらが良いのでしょうか？パフォーマンス的に良いですか？そして標準的ですか？

解決方法は？

使用方法 $('#myDiv').click(function(){ は より良い は、標準的なイベント登録モデルに従っているためです。(jQuery 内部 は addEventListener と attachEvent ).

でのイベント登録は基本的に 現代的な方法 は 控えめ の方法でイベントを処理します。また、ターゲットに対して複数のイベントリスナーを登録するために addEventListener() を同じターゲットで使用することができます。

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

なぜ addEventListener を使用するのですか？ (MDNより)

addEventListenerは、イベントリスナーを登録するための方法として規定されています。 W3C DOMで定義されています。そのメリットは以下の通りです。

• 1つのイベントに対して、複数のハンドラを追加することができる。これは、DHTML ライブラリや Mozilla の拡張機能で、特に以下のような場合に便利です。 他のライブラリや拡張機能が使用されている場合でも、正常に動作する必要があります。
• リスナーがアクティブになるフェーズをより細かく制御できる（キャプチャ vs. バブリング）。
• HTML要素だけでなく、あらゆるDOM要素で動作します。

モダンイベント登録の詳細 -> http://www.quirksmode.org/js/events_advanced.html

その他の方法として HTML属性 , 例:

<button onclick="alert('Hello world!')">

または DOM要素のプロパティ , 例:

myEl.onclick = function(event){alert('Hello world');}; 

は古いものなので、簡単に上書きされてしまいます。

HTML属性 マークアップが大きくなり、読みにくくなるため、避けるべきです。コンテンツ／構造と動作の懸念がうまく分離されず、バグが見つかりにくくなる。

の問題点は DOM 要素のプロパティ メソッドは、1つのイベントにつき1つのイベントハンドラしか要素にバインドできないことを意味します。

伝統的なイベントハンドリングの詳細 -> http://www.quirksmode.org/js/events_tradmod.html

MDNリファレンス https://developer.mozilla.org/en-US/docs/DOM/event