事件代理--给多个元素调用同个函数

标签：jquery   性能   

每一个js事件（例如：click、mouseover等）都会冒泡到腹肌节点。当我们需要给多个元素调用同个函数时，这点会很有用。

比如要给一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：

$("#myTable td").click(function(){
    $(this).css("background","red");
})

假设有100个td元素，在使用以上方式时，就需要绑定100个事件，这将带来很负面的性能影响。

代替这种效率很差的多元素事件监听的方法就是：只需向它们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素，代码如下：

$("#mytable").click(function (e) {
    var $clicked = $(e.target);        //e.target捕捉到触发的目标元素
    $clicked.css("background","red");
 });

改进方式中，只为一个元素绑定了1个事件。显然，这种方式的性能要优于之前那种。同时，jQuery 1.7中提供了一个新的方式on()，来将整个事件监听封装到一个便利方法中，如下所示：

$("#mytable").on("click","td",function () {
    $(this).css("background","red");
 });

事件代理--给多个元素调用同个函数,布布扣,bubuko.com

事件代理--给多个元素调用同个函数

标签：jquery   性能   

原文地址：http://blog.csdn.net/comeonstone/article/details/38516185