604

私は巨大な 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 番目の方法を使用します。どちらの方がよいですか？パフォーマンスに優れていますか？そして標準？

4

18 に答える 18

600
于 2012-09-27T18:04:14.090 に答える
67

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

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

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

クリック イベントについては、Native Browser events vs jquery triggerまたはjQuery vs Native Click Event Bindingを確認してください。

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

$('#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
于 2012-09-27T18:09:54.393 に答える
42

私が理解していることから、あなたの質問は実際にはjQueryを使用するかどうかに関するものではありません. むしろ、イベントを HTML でインラインにバインドするか、イベント リスナーを介してバインドする方がよいでしょうか?

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

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

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

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

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

于 2012-09-27T18:12:02.987 に答える
21

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

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

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

于 2012-09-28T06:51:06.840 に答える
21

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

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

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

function divFunction(){
 //some code
}
于 2012-09-27T18:04:25.493 に答える
16

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

于 2012-09-27T18:05:42.793 に答える
12

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

デモ

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つだけになります。

于 2012-09-27T18:32:50.583 に答える
11

IMHO、次の条件が満たされた場合にのみ、 onclick が .click よりも優先される方法です。

  • ページには多くの要素があります
  • クリックイベントに登録するイベントは1つだけ
  • モバイル性能・電池持ちが気になる

モバイル デバイスの JavaScript エンジンは、同じ世代に作られたデスクトップの JavaScript エンジンよりも 4 倍から 7 倍遅いという事実から、私はこの意見を形成しました。jQuery がすべてのイベントをバインドしていて、ユーザー エクスペリエンスとバッテリー寿命が犠牲になっているため、モバイル デバイスでサイトにアクセスしてスクロールがぎくしゃくするのが嫌いです。最近のもう 1 つのサポート要因は、これは政府機関のみに関係することですが ;) IE7 ポップアップで、JavaScript プロセスが長い間待っているか、プロセスをキャンセルしていることを示すメッセージ ボックスが表示されました。これは、jQuery を介してバインドする多くの要素が存在するたびに発生しました。

于 2013-03-19T19:25:15.433 に答える
10

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

ただし、宣言型マークアップのアイデアをすぐに捨てないでください。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 属性を使用することで回避できます。

于 2014-10-18T12:16:53.410 に答える
5 
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

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

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

イベントごとに何千もの個別のスクリプト ブロックを作成するよりも、1 つのイベントで何百、何千ものアイテムをキャプチャできます。

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

于 2012-09-27T18:18:01.320 に答える
4

異なる目的に使用できるという点で、どちらが優れているというわけではありません。onClick(実際にはonclick) のほうがパフォーマンスがわずかに優れていますが、違いに気付くとは思えません。

それらが異なることを行うことに注意する価値があります。.click任意の jQuery コレクションにバインドできますが、バインドしonclickたい要素でインラインで使用する必要があります。を使用して 1 つのイベントのみをバインドすることもできますが、引き続きイベントをバインドできますonclick。.click

私の意見では、私は一貫性.clickを保ち、あらゆる場所で使用し、すべての JavaScript コードをまとめて HTML から分離したままにします。

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

于 2012-09-27T18:05:42.643 に答える
3

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

于 2012-09-27T18:05:16.633 に答える
3

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

于 2012-09-27T18:06:33.247 に答える
2

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

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

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

于 2012-09-27T18:05:00.877 に答える
2

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

個人的には jQuery を使用しているので、一貫性があり、スクリプトからマークアップを切り離しているので、jQuery を使い続けます。

于 2012-09-27T18:05:52.213 に答える