javascript – jQuery中的事件委托,怎么做？

在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 ..
      }      
});

但它不会和vanilla JavaScript一样吗？我想知道是否有更好的方法来实现它.如果这是唯一的方法,jQuery方式比JS方法有什么好处？

解决方法:

你可以做：

$(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的工作方式.

但是有一点不同,即这将引用由选择器匹配的元素,而不是处理程序绑定的元素.

通常,优点是jQuery代码比使用addEventListener更兼容跨浏览器兼容性.

标签：event-delegation,javascript,jquery,events
来源： https://codeday.me/bug/20190929/1833961.html