0

JavaScript では、次のようなイベント委任を使用していました。

someDiv.addEventListener('click', function(evt){
    if(evt.target.id == "#someChild"){
       // Do something..
    } else if(evt.target.id == "#anotherChild"){
       // Do something else..
    }
}, false);

jQueryでこれに相当するものは何ですか? 私は知って.on()いますが、イベント委任でそれを使用する方法は? つまり、これはどのように行われるのですか：

someDiv.on('click, '#someChild, #anotherChild", function(evt){
      if($(this).is("#someChild")){ 
           // Do something..
      } else if($(this).is("#anotherChild")){
           // Do something else ..
      }      
});

しかし、バニラの JavaScript とまったく同じではないでしょうか? それを達成するためのより良い方法があるかどうか知りたいです。そして、これが唯一の方法である場合、JS よりも jQuery の方が優れている点は何ですか?

4

3 に答える 3

1

jQuery を使用すると、次のようになります。

function onButtonClick(e) {
  //this = the button that was clicked

}

$(document.body).on('click','button',onButtonClick)

ここでドキュメントを読むことができます

于 2012-09-01T18:00:57.327 に答える
1

この要素が動的に作成され、ページの読み込み時にそこにない場合は、ここから開始できます

$(document).on('click', '#someChild', function(evt) {
   // Do something..      
});

ページがレンダリングされる前に要素が作成された場合、これは機能します

         <input type="button" onclick="fnClickfn();" id="xxx" />

編集：

また.on、jQuery の新しいバージョン (1.6 以降だと思います) でのみ機能するため、必要な古いバージョンを使用していないことを確認して.liveください.die。

于 2012-09-01T18:02:34.387 に答える
1

できるよ：

$(someDiv).on('click', '#someChild, #anotherChild', function(){
    if(this.id ==='someChild'){ 
       // Do something..
    } else if(this.id === 'anotherChild'){
       // Do something else ..
    }      
});

または、とにかく両方の要素に対して異なることを行う場合は、2 つのイベント ハンドラーを作成します。

$(someDiv).on('click', '#someChild', function(){
     // Do something..    
}).on('click', '#anotherChild', function() {
     // Do something else ..
});

しかし、バニラの JavaScript とまったく同じではないでしょうか? それを達成するためのより良い方法があるかどうか知りたいです。そして、これが唯一の方法である場合、JS よりも jQuery の方が優れている点は何ですか?

もちろん、基本的には同じです。jQuery は DOM API のラッパーを提供することで作業を少し楽にしますが、DOM の動作は変わりません。

ただし、違いがあります。つまりthis、ハンドラーがバインドされている要素ではなく、セレクターに一致する要素を参照します。

一般に、jQuery コードは を使用するよりもブラウザー間の互換性が高いという利点がありaddEventListenerます。

于 2012-09-01T18:04:24.023 に答える