jquery事件委托

不使用事件委托会有以下四个问题

第一：大量的事件绑定，性能消耗，而且还需要解绑（IE会泄漏）
第二：绑定的元素必须要存在
第三: 后期生成HTML会没有事件绑定，需要重新绑定
第四: 语法过于繁杂

事件委托利用事件冒泡原理，自己不处理事件，而是委托给父节点或者祖先元素甚至是根元素来处理。

jquery为此衍生出四种事件绑定函数

bind方法
live方法
delegate方法
on方法

• bind方法：

上一篇博文提到bind方法，bind方法不能实现事件委托,事件处理由自身来处理。

$('p').bind('click',function(){})

• live方法：

我是用的jquery 2.1.3版本 live方法已经被弃用了。

$('a').live('click', function() { alert("!")})

live事件是将a事件的click方法通过document来获取，即用document来委托目标事件。
前人总结的缺点如下：

1. 在调用 .live() 方法之前，jQuery 会先获取与指定的选择器匹配的元素，这一点对于大型文档来说是很花费时间的。
2. 不支持链式写法。例如，$(“a”).find(“.offsite, .external”).live( … ); 这样的写法是不合法的，并不能像期待的那样起作用。
3. 由于所有的 .live() 事件被添加到 document 元素上，所以在事件被处理之前，可能会通过最长最慢的那条路径之后才能被触发。
4. 在移动 iOS (iPhone, iPad 和 iPod Touch) 上，对于大多数元素而言，click 事件不会冒泡到文档 body 上，并且如果不满足如下情况之一，就不能和 .live() 方法一起使用：使用原生的可被点击的元素，例如, a 或 button，因为这两个元素可以冒泡到 document。
5. 在 document.body 内的元素使用 .on() 或 .delegate() 进行绑定，因为移动 iOS 只有在 body 内才能进行冒泡。
6. 需要 click 冒泡到元素上才能应用的 CSS 样式 cursor:pointer (或者是父元素包含document.documentElement)。但是依然需要注意的是，这样会禁止元素上的复制/粘贴功能，并且当点击元素时，会导致该元素被高亮显示。
7. 在事件处理中调用 event.stopPropagation() 来阻止事件处理被添加到 document 之后的节点中，是效率很低的，因为事件已经被传播到 document 上。
8. .live() 方法与其它事件方法的相互影响是会令人感到惊讶的。例如，$(document).unbind(“click”) 会移除所有通过 .live() 添加的 click 事件!

• delegate方法：

$('#element).delegate('a', 'click', function() { alert("!!!") });

第一个参数 css选择器
第二个参数 事件类型
第三个参数 callback函数

jQuery 扫描文档查找(‘#element’)，并使用 click 事件和’a’这一CSS选择器作为参数把 alert 函数绑定到(‘#element)上。

任何时候只要有事件冒泡到$(‘#element)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

• on方法：

  所有delegate(),live(),bind()方法内部都是调用的on方法。
  undelegate(),unlive(),unbind()方法内部都是调用的off方法。

$('p').on('click',callback);