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で指定されたイベントリスナーを登録する方法です。その利点は次のとおりです。

• イベントに複数のハンドラーを追加できます。これは、他のライブラリ/拡張機能が使用されている場合でも適切に機能する必要がある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

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

パフォーマンスを向上させるには、ネイティブJavaScriptを使用してください。開発を高速化するには、jQueryを使用します。jQueryのパフォーマンスとネイティブ要素のパフォーマンスの比較を確認してください。

Windows Server 2008 R2 / 7 64ビット上のFirefox 16.0 32ビットでテストを行いました

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

クリックイベントについては、ネイティブブラウザーイベントとjqueryトリガー、またはjQueryとネイティブクリックイベントのバインディングを確認してください。

Windows Server 2008 R2 / 7 64ビットの32ビット版Chrome 22.0.1229.79でのテスト

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

私の理解によると、あなたの質問は、jQueryを使用するかどうかということではありません。それはむしろ：HTMLにインラインでイベントをバインドする方が良いですか、それともイベントリスナーを介してバインドする方が良いですか？

インラインバインディングは非推奨です。さらに、この方法では、特定のイベントに1つの関数のみをバインドできます。

したがって、イベントリスナーの使用をお勧めします。このようにして、多くの関数を1つのイベントにバインドし、必要に応じて後でバインドを解除することができます。次の純粋なJavaScriptコードを考えてみます。

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

これは、ほとんどの最新ブラウザーで機能します。

ただし、jQueryをプロジェクトに既に組み込んでいる場合は、jQuery：.onまたは.click関数を使用してください。

それらを組み合わせることができ、jQueryを使用して関数をクリックにバインドします

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

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

$('#myDiv').clickJavaScriptコードをHTMLから分離するため、より優れています。ページの動作と構造を異なるように保つ必要があります。これは非常に役立ちます。

標準とパフォーマンスの両方が得られるので、これを試してください。

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

2番目の方法は単純なJavaScriptコードであり、jQueryより高速です。ただし、ここでのパフォーマンスはほぼ同じになります。

私見、onclickは、以下の条件が満たされた場合にのみ、.clickよりも推奨される方法です。

• ページには多くの要素があります
• クリックイベントに登録するイベントは1つだけ
• あなたはモバイルパフォーマンス/バッテリー寿命が心配です

私がこの意見を形成したのは、モバイルデバイスのJavaScriptエンジンは、同じ世代で作成されたデスクトップエンジンよりも4〜7倍遅いためです。ユーザーエクスペリエンスとバッテリーの寿命を犠牲にしてjQueryがすべてのイベントをバインドしているため、モバイルデバイス上のサイトにアクセスしてスクロールが不安定になると、私はそれを嫌います。最近のもう1つのサポート要因は、これは政府機関のみに関係する問題であるはずですが;）、JavaScriptプロセスの処理に時間がかかっていることを示すメッセージボックスが表示されたIE7ポップアップが表示されました。これは、jQueryを介してバインドする要素が多数あるたびに発生しました。

作品の違い。click（）を使用すると、いくつかの関数を追加できますが、属性を使用すると、最後の関数だけが実行されます。

デモ

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

パフォーマンスについて話している場合、いずれにしても直接使用する方が常に高速ですが、属性を使用すると、1つの関数のみを割り当てることができます。

ここでは、関心事の分離が重要であるため、イベントバインディングが一般的に受け入れられている方法です。これは基本的に、既存の回答の多くが言っていることです。

ただし、宣言型マークアップの考えをあまりに早く捨てないでください。それはその場所を持っており、Angularjsのようなフレームワークを備えた、目玉です。

<div id="myDiv" onClick="divFunction()">Some Content</div>一部の開発者によって悪用されたため、全体が非常にひどく恥をかかされたことを理解する必要があります。それで、それはのように、冒とく的なプロポーションのポイントに達しましたtables。一部の開発者はtables、表形式のデータを実際に避けています。理解せずに行動する人々の完璧な例です。

私は自分の行動を私の見解から切り離しておくという考えが好きですが。私はマークアップが何をするかを宣言することに問題がないと思います（どのように行うかではなく、それはふるまいです）。これは、実際のonClick属性またはカスタム属性の形式であり、ブートストラップのJavaScriptコンポーネントとよく似ています。

このように、マークアップをちらりと見るだけで、JavaScriptイベントバインダーの逆ルックアップを試みる代わりに、何が行われているかを確認できます。

したがって、上記の3番目の代替方法として、データ属性を使用してマークアップ内の動作を宣言的に宣言します。動作は表示されませんが、一目で何が起こっているのかを確認できます。

ブートストラップの例：

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

ソース：http : //getbootstrap.com/javascript/#popovers

注 2番目の例の主な欠点は、グローバル名前空間の汚染です。これは、上記の3番目の代替方法を使用するか、Angularのようなフレームワークと自動的にスコープするng-click属性を使用することで回避できます。

どちらも、さまざまな目的に使用できるという点で優れています。onClick（実際にはである必要がありますonclick）パフォーマンスは非常にわずかですが、その違いに気付かないでしょう。

それらが異なることを行うことは注目に値します：.click任意のjQueryコレクションにバインドできますが、バインドしonclickたい要素でインラインで使用する必要があります。また、使用する唯一のイベントをバインドできるonclickのに対し、.clickあなたがバインドイベントに継続することができます。

私の意見では、私はそれについて一貫していて、.clickどこでも使用し、すべてのJavaScriptコードをまとめてHTMLから分離するようにします。

使用しないでくださいonclick。何をしているのかを知らない限り、それを使用する理由はありません。

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick、onmouseover、onmouseoutなどのイベントは実際にはパフォーマンスに悪影響を及ぼします（主にInternet Explorerでは、図を参照してください）。Visual Studioを使用してコーディングする場合、これらを使用してページを実行すると、これらの1つ1つが別個のSCRIPTブロックを作成し、メモリを占有するため、パフォーマンスが低下します。

言うまでもなく、懸念事項を分離する必要があります。JavaScriptとレイアウトは分離する必要があります。

これらのイベントのイベントハンドラーを作成することは常に優れています。1つのイベントで、数千のアイテムをキャプチャするのではなく、数千のアイテムをキャプチャできます。

（また、他のすべての人が言っていることすべて。）

まあ、jQueryの背後にある主なアイデアの1つは、JavaScriptを厄介なHTMLコードから分離することです。最初の方法は行く方法です。

ほとんどの場合、パフォーマンスが唯一の基準である場合、ネイティブJavaScriptメソッドはjQueryよりも優れた選択肢ですが、jQueryはJavaScriptを利用して開発を容易にします。パフォーマンスをあまり低下させないため、jQueryを使用できます。特定のケースでは、パフォーマンスの違いは無視できます。

最初の使用方法はonclickjQueryではなく単なるJavaScriptであるため、jQueryのオーバーヘッドは発生しません。イベントハンドラーを各要素に追加せずに他の要素に追加する必要がある場合は、jQueryの方法をセレクターを介して拡張できますが、jQueryを使用する必要があるかどうかは問題です。

個人的にはjQueryを使用しているので、jQueryは一貫しており、スクリプトからマークアップを切り離すので、私はそれを使用します。

最初の方法は優先することです。高度なイベント登録モデルを使用しているため、同じ要素に複数のハンドラーをアタッチできます。イベントオブジェクトに簡単にアクセスでき、ハンドラーは任意の関数のスコープ内に存在できます。また、動的です。つまり、いつでも呼び出すことができ、動的に生成される要素に特に適しています。jQueryを使用するか、他のライブラリを使用するか、ネイティブメソッドを直接使用するかは重要ではありません。

インライン属性を使用する2番目の方法は、多くのグローバル関数（名前空間の汚染につながる）を必要とし、コンテンツ/構造（HTML）と動作（JavaScript）を混合します。使用しないでください。

パフォーマンスや標準に関する質問には、簡単には答えられません。2つの方法は完全に異なり、実行する処理も異なります。最初のものはより強力ですが、2番目のものは軽蔑されます（悪いスタイルと見なされます）。

Onclick関数jquery

$('#selector').click(function(){ //Your Functionality });