06事件代理

每一个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');
});

在改进方式中，我们只为一个元素绑定了一个事件。显然，这种方式的性能要优于之前那种。同时，在jquery.1.7以后的版本中，提供了新的方式on(),来帮助我们将整个事件监听封装到一个便利的方法中如下：

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

06事件代理 ​