javascript - jQuery 中的事件委托(delegate)，怎么做？

Question

在 JavaScript 中，我曾经使用这样的事件委托(delegate):

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

jQuery 中与此等效的是什么？我知道 .on() 但如何在事件委托(delegate)中使用它？我的意思是这是怎么做到的:

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

但是它不是和普通 JavaScript 中的一样吗？我想知道是否有更好的方法来实现它。如果这是唯一的方法，那么 jQuery 方法相对于 JS 方法有什么好处？

Answer 1

你可以这样做:

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

或者，如果您对两个元素执行不同的操作，则创建两个事件处理程序:

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

But wouldn't it be just the same as in vanilla JavaScript ? I want to know if there's a better way to achieve it. And if this is the only way, what's the benefit of jQuery way over JS one ?

当然，它基本上是相同的，jQuery 只是通过提供 DOM API 的包装器让您的生活变得更轻松，但它不会改变 DOM 的工作方式。

但有一个区别，即 this 将引用选择器匹配的元素，而不是处理程序绑定(bind)到的元素。

总的来说，优点是 jQuery 代码比使用 addEventListener 更具跨浏览器兼容性。