web-dev-qa-db-ja.com

onclickを使用して関数を呼び出すか、.clickを使用してイベントをバインドする方が良いですか？

Divがあり、ユーザーがdivをクリックしたときに特定のコードを実行したいとします。それには2つの方法があります。

HTML

<div id="clickme">Click Me</div>

Javascript

$(document).ready(function(){
    $('#clickme').click(function(){
        //Other code here doing abc.
    });
});

2番目の方法はそれを行う関数を呼び出すことですが、それは関数によって呼び出されます

<div id="clickme" onclick="clickme()">Click Me</div>

Javascript

function clickme(){
    //Other code doing abc.
}

私の質問は、これらのコードは両方とも同じことをしているということですか？どちらがより効率的で推奨されますか？

javascriptjqueryeventsonclickonclicklistener
8
LoneWOLFs

場合によります。通常、それが非常に単純なものである場合は、onlick = ""を使用することを好みます。

一方、より複雑で多くのコードを実行する場合は、読みやすくするためにバインドイベントを使用することをお勧めします。

正直に言って、onclick = ""はパフォーマンス/メモリ使用量などの点で優れていると思います。使用しているバインドイベントはjqueryのレイヤーにあり、onclickを使用すると、イベントは要素から直接呼び出されます。

本当にそれは選択の問題です。

バインドイベントで私が気に入っているのは、何をバインドしてクリックやキーストロークをキャプチャするかについて、無限の可能性があるということです。遅延付きバインドなどのバインドイベントを強化するためのjqueryプラグインもあります（遅延付きバインドは、キーを押したときにコードが実行され、キーを押してからx秒後に実行されます。これは、入力中に検索を実行するときに最適です。キーを押すたびに要求が行われないようにするため、ajaxを介して）

さらに情報が必要な場合はお知らせください。

私はあなたに良い洞察を与えたことを願っています:)

2
Oliver M Grech

それはあなたが好むかどうかに依存します：

1）jQueryのドキュメント準備イベントでバインドされた匿名関数

これは、あなたの名前空間があなたが気にしない別の関数名で乱雑にならないことを意味します。また、コードが残りの初期化ルーチンと一緒になっていることも意味します。また、複数のイベントをバインドすることもできます。

2）名前付き関数をバインドする宣言的な方法。

つまり、それに応じて関数に名前を付ける必要があり、ドキュメントを検索して、バインドされているかどうか、またはどこにバインドされているかを確認する必要があります。また、セレクター呼び出しが1つ少ないため、速度の点でより効果的です。

明確にコーディングするために、ほとんどの場合、JavaScriptの初期化コードをHTML宣言から分離することをお勧めします。

1
nurettin

.click（function（）{}の使用は、標準のイベント登録モデルに従うため、より優れています。

ここでは、複数のコールバックを割り当てることができます。

例：

<script type="text/javascript">
$(document).ready(function() {
    $("#clickme").click(function() {
        alert("clicked!");
    });
    $("#clickme").click(function() {
        alert("I concur, clicked!");
    });
});
</script>

ここで、uがbind（）を使用してクリック関数をバインドすると、要件に応じて、特定の関数をバインド解除できます。

1
EnterJQ