0

基本的に、javascriptで「onclick」イベントをキャッチするための複数のオプションがあります。

html：

<div id='menu'>
  <button>Title</button>
</div>

次のいくつかのjQueryオプション：

<script>
var menu = $('#menu');
var buttons = menu.find('button').click(menuEvent);

function menuEvent() {
  ..
}
</script>

<script>
var menu = $('#menu');
var buttons = menu.find('button');

buttons.click(function() {
  ..
});
</script>

<script>
var menu = $('#menu');
var buttons = menu.find('button');

buttons.get(0).onclick = function() {
  ..
});
</script>

今ではそれらはすべて同じように見え、おそらくお互いよりも実際には速くはありません。では、これら3つのうちどれが「最良の」アプローチでしょうか、それとももっと良い方法があるのでしょうか。

javascriptだけでこれを実行できることは知っていますが、とにかくjQueryを使用する予定なので、必要がない場合は複雑になる可能性があります。

4

2 に答える 2

2

最高のものは次のようになります：

buttons.on("click", function(event){
// code to run on click
});

詳細はこちら：http ：//api.jquery.com/on/

于 2012-01-28T10:29:02.107 に答える
1

あなたが公開するアプローチに概念的に最良のアプローチがあるかどうかはわかりません。それは文脈にもっと依存します。

  • ボタンのみにイベントハンドラーをアタッチする場合は、この方法で問題ありません。

    buttons.click(function() {
  ..
});

  • 同じハンドラーを要素の異なるグループで共有する必要がある場合は、ハンドラーを個別に定義して、異なるグループで使用できます。

    function myClickHandler() {
    ...
}

buttons.click(myClickHandler);
otherButtons.click(myClickHandler);

  • .on（）はイベント委任用です。バインドが発生した後にDOMに挿入された要素にイベントハンドラーを追加する必要がある場合は、イベントの委任を使用する必要があります。基本的に、イベントを親コンテナに「バインド」し、問題の要素へのセレクターを使用してその実行を制限します。

    container.on('click', '.button', function() {
    // will execute when clicking on elements with class .button
    // present inside the container
});
于 2012-01-28T10:40:15.890 に答える