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 回答