巨大な jQuery アプリケーションがあり、クリック イベントに以下の 2 つの方法を使用しています。
最初の方法
html
<div id="myDiv">Some Content</div>
jQuery
$('#myDiv').click(function(){
//Some code
});
2番目の方法
html
<div id="myDiv" onClick="divFunction()">Some Content</div>
JavaScript関数呼び出し
function divFunction(){
//Some code
}
アプリケーションでは、最初の方法と 2 番目の方法のいずれかを使用します。どちらが優れていますか? パフォーマンスは優れていますか? 標準ですか?
ベストアンサー1
標準のイベント登録モデルに従うため、を使用する方$('#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);
addEventListener を使用する理由は何ですか?(MDNより)
addEventListener は、W3C DOM で指定されているイベント リスナーを登録する方法です。その利点は次のとおりです。
- イベントに対して複数のハンドラーを追加できます。これは、他のライブラリ/拡張機能が使用されている場合でも正常に動作する必要がある DHTML ライブラリまたは Mozilla 拡張機能に特に役立ちます。
- リスナーがアクティブになるフェーズ（キャプチャリングとバブリング）をより細かく制御できます。
- これは 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 つのイベント ハンドラーしか要素にバインドできないことです。
従来のイベント処理の詳細 ->http://www.quirksmode.org/js/events_tradmod.html