web-dev-qa-db-ja.com

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番目の方法を使います。どっちがいいですか？パフォーマンスが良い？そして標準？

javascripthtmljavascript-eventsjquery
527
Techie

標準のイベント登録モデルに従うので、$('#myDiv').click(function(){の使用は better です。 （jQuery internal は addEventListener と attachEvent を使います）。

基本的に modern でイベントを登録することは、 控えめな イベント処理方法です。ターゲットに複数のイベントリスナを登録するために、同じターゲットに対して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 attributeはマークアップを大きくし、読みにくくするので避けるべきです。コンテンツ/構造および動作の懸念はうまく分離されていないため、バグを見つけるのは困難です。

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

従来のイベント処理についての詳細 - > http://www.quirksmode.org/js/events_tradmod.html

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

528
Selvakumar Arumugam

パフォーマンスを向上させるには、ネイティブの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
62
Marian Zburlea

私が理解していることから、あなたの質問は本当にjQueryを使うべきかどうかではありません。それはむしろ： イベントをHTMLでインラインにバインドするのか、イベントリスナーを通してバインドするのが良いのでしょうか。

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

そのため、イベントリスナーを使用することをお勧めします。このようにして、多くの関数を単一のイベントにバインドし、後で必要に応じてそれらをアンバインドすることができます。この純粋なJavaScriptコードを見てください。

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

これは最近のほとんどのブラウザで動作します。

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

37
Michał Miszczyszyn

$('#myDiv').clickはJavaScriptコードと _ html _ を分離しているのでより優れています。ページ の振る舞いと構造を にしておくようにしなければなりません。これは大いに役立ちます。

14
geekman

それはあなたに標準とパフォーマンスの両方を与えるのでこれのために行きなさい。

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

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

14
Rahul

あなたはそれらを組み合わせることができます、クリックに関数をバインドするためにjQueryを使います

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

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

function divFunction(){
 //some code
}
13
CaffGeek

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

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

モバイルデバイスのJavaScriptエンジンは、同じ世代のデスクトップエンジンよりも4倍から7倍遅いという事実のため、私はこの意見を述べました。 jQueryが私のユーザーエクスペリエンスとバッテリー寿命を犠牲にしてすべてのイベントを拘束しているので、私が自分のモバイルデバイス上のサイトにアクセスしてちょっとしたスクロールを受け取るとき、私はそれを嫌います。最近のもう1つの支持要因は、これは政府機関にとっての懸念のみであるはずですが、JavaScriptの処理に時間がかかることを示すメッセージボックスが表示されたIE7のポップアップを表示しました。これは、jQueryを介してバインドする要素がたくさんあるたびに起こりました。

10
Thomas Vanderhoof

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

_ demo _

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つの機能しか割り当てることができません。

9
Anton Baksheiev

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

しかし は宣言的マークアップのアイデアをあまりにも早く捨てないでください。それはその場所を持っています、そしてAngularjsのようなフレームワークで、最も重要です。

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

私は自分の行動を私の見解から切り離しておくという考えが好きですが。マークアップで what と宣言しても問題はありません（ how ではありません、これは動作です）。これは、実際の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属性を自動的に適用することで回避できます。

8
Chris

どちらも better ではありません。これらは異なる目的で使用される可能性があるからです。 onClick（実際はonclickであるべきです）のパフォーマンスはわずかに良くなりますが、違いがあることに気付くことは間違いありません。

.clickはどのjQueryコレクションにもバインドできますが、onclickはバインドしたい要素にインラインで使用する必要があります。 1つのイベントのみをバインドしてonclickを使用することもできますが、.clickを使用すると、引き続きイベントをバインドできます。

私の意見では、私はそれについて一貫していて、どこでも.clickを使って、そして私のJavaScriptコードの all を一緒にしてHTMLから分離するだけでよいでしょう。

onclickを使わないでください。自分がしていることを知っていない限り、それを使用する理由は何もありません。

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

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

言うまでもありません 懸念の分離 ：JavaScriptとレイアウトの分離が必要です。

それぞれのイベントに対して何千もの個別のスクリプトブロックを作成するのではなく、1つのイベントで何百ものアイテムをキャプチャできるため、これらのイベントのいずれにもevenHandlerを作成することをお勧めします。

（また、他のみんなが言っていることすべて）

4
Mark Pieszak - Trilon.io

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

3
Adil

さて、 jQuery の背後にある主なアイデアの1つは、JavaScriptと厄介な _ html _ コードを区別することです。最初の方法は行く方法です。

3
supernova

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

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

性能や基準についてのあなたの質問は簡単には答えられません。 2つの方法はまったく異なるもので、異なることをします。最初のものは強烈で、2番目のものは軽蔑されています（悪いスタイルと考えられています）。

2
Bergi

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

個人的にはjQueryを使っているので、一貫性があり、スクリプトからマークアップを分離するので、私はそれを使い続けるでしょう。

2
Dustin Laine

Onclick関数Jquery

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

0
Love Kumar