Question

我正在升级包含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
    }); 
});

Answer 1

根据.on（）的jquery API，它更有效，因为只有一个事件附加到＃main-container，来自不同.cartridge的事件只需要“冒泡”到这个容器。 / p>

来自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/请参阅“直接和委派活动”

JQuery：什么是最有效的事件声明方式？

1 个答案: