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 中的 this 等价于什么？我知道.on()但如何在事件委托中使用它？我的意思是这是怎么做到的：

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

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

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

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

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

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

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

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

一般来说，优点是 jQuery 代码比使用addEventListener.

于 2012-09-01T18:04:24.023 回答