1

我正在升级一个包含 2 个具有大量元素的视图的 Web 项目。

这时候所有的元素都有mouseenter、mouseleave、click、...等几个事件在网页渲染的时候被一一定义。

我的问题是：使用最后一个 JQuery 方法.on()使用事件映射和动态选择器是否更有效：

$("#main-container").on({
    mouseenter: function (event) {    
       //Do stuff
    },            
    mouseleave: function (event) {
       //Do stuff     
    },
    mousedown: function (event) {
       //Do stuff
    }
    },
    ".cartridge"
);

比当前事件声明：

$('[id^="cartridge"]').each(function(index) {       
    $(this).click(function(){
        //Do stuff
    }); 
    $(this).mouseenter(function(){
        //Do stuff
    }); 
    $(this).mouseleave(function(){
        //Do stuff
    }); 
});
4

1 回答 1

2

根据 .on() 的 jquery API，它更有效，因为只有一个事件附加到您的 #main-container 并且来自不同 .cartridge 的事件只需要“冒泡”到这个容器。

从jQuery API：

除了能够处理尚未创建的后代元素上的事件之外，委托事件的另一个优点是当必须监视许多元素时，它们的开销可能会大大降低。在其 tbody 中有 1,000 行的数据表上，此示例将处理程序附加到 1,000 个元素：

$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});

委托事件方法仅将事件处理程序附加到一个元素，即 tbody，并且事件只需要冒泡一个级别（从单击的 tr 到 tbody）：

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

http://api.jquery.com/on/请参阅“直接和委托事件”

于 2012-09-18T06:32:51.027 回答