jQuery 中的事件委托，怎么做? [英] Event delegation in jQuery, how to do it?

问题描述

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

someDiv.addEventListener('click', function(evt){if(evt.target.id == "#someChild"){//做一点事..} else if(evt.target.id == "#anotherChild"){//做其他事情..}}， 错误的);

jQuery 中的 this 等价于什么?我知道 .on() 但如何在事件委托中使用它?我的意思是这是怎么做的:

someDiv.on('click, '#someChild, #anotherChild", function(evt){if($(this).is("#someChild")){//做一点事..} else if($(this).is("#anotherChild")){//做其他事情..}});

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

解决方案

您可以:

$(someDiv).on('click', '#someChild, #anotherChild', function(){if(this.id ==='someChild'){//做一点事..} else if(this.id === 'anotherChild'){//做其他事情..}});

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

$(someDiv).on('click', '#someChild', function(){//做一点事..}).on('click', '#anotherChild', function() {//做其他事情..});

<块引用>

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

当然，它基本上是一样的，jQuery 只是通过为 DOM API 提供一个包装器让你的生活更轻松一些，但它并没有改变 DOM 的工作方式.

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

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

In JavaScript i used to use event delegation like this :

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

What's the equivalent of this in jQuery? i know about .on() but how to use it in event delegation ? i mean is this how is it done :

someDiv.on('click, '#someChild, #anotherChild", function(evt){
      if($(this).is("#someChild")){ 
           // Do something..
      } else if($(this).is("#anotherChild")){
           // 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 ?

解决方案

You can do:

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

Or create two event handlers if you do different things for both elements anyway:

$(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 ?

Of course it's basically the same, jQuery just makes your life a bit easier by providing a wrapper around the DOM API, but it does not change how the DOM works.

There is a difference though, namely that this will refer to the element matched by the selector, not to the element the handler is bound to.

In general, the advantage is that the jQuery code is more cross-browser compatible than using addEventListener.

这篇关于jQuery 中的事件委托，怎么做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！