jQuery 2.0.3 源码分析 bind/live/delegate/on

传统的时间处理：

给某一个元素绑定一个点击事件，传入一个回调句柄处理

element.addEventListener('click',doSomething,false);

这样的绑定如果页面上面有几百个需要绑定，那么就要绑定几百多次。

问题：

大量的事件绑定，性能消耗，而且还需要解绑（IE会泄露）

绑定的元素必须要存在。

后期生成HTML会没有事件绑定，需要重新绑定。

语法过于繁杂

事件委托

DOM有个事件流的特性，在页面上触发节点的时候事件都会上下或者向上传播，事件捕捉和事件冒泡。

事件传送可以分为3个阶段：

在事件Capturing捕捉阶段，时间将沿着DOM数向下转送，目标节点的每一个祖先节点，直至目标节点，

在目标target阶段，浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器，目标节点就是触发事件的DOM节点。

在冒泡bubbling阶段，事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点，该过程中的每一步，浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行他们，

利用事件传播这个机制，就可以实现事件委托。

事件委托就是时间目标自身不处理事件，而是吧处理任务委托给其他父元素或者祖先元素，甚至根元素。

jquery的事件优化.bind(),.live(),.on(),.delegate()

on()方法事件处理程序到当前选定的jquery对象中的元素，提供绑定事件处理的所有功能。

性能对比

生成999个DOM节点，不做任何处理，内存消耗2.2M

给每个元素绑定click事件。增加到5.6M，用on2.2M

只要on的delegate对象是HTML页面缘由的元素，由于是事件的触发是通过Javascript的事件冒泡机制来检测，所以对于所有子元素所有的事件监测均能有效，且由于不用对多个元素进行事件绑定，能够有效的节省内存的损耗。

bing()方法用于直接附加一个事件处理程序到元素上。

处理程序附加到jquery对象中当前选中的元素，所以，在bing()绑定事件的时候，这些元素必须已经存在。

live()将委托的事件处理程序附加到一个页面的decument元素，从而简化了在页面上动态添加的内容上事件处理的使用，

例子:$('a').live('click'.function(){alert('2121')});

jquery把alert函数绑定到$(document)元素上，并使用click和a做为参数。

任何时候只要在事件冒泡到document节点上，他就查看该事件是否是一个click事件，以及该事件的目标元素与a这一css选择权是否匹配，如果都是的话，则执行函数。

使用live()会出现的问题：

在调用live方法之前，jquery会先获取与指定的选择权匹配的元素， 这一点对于大型文档来说是很花费时间的。

不支持链式写法，$('a').find('').live(),不支持。

由于所有的live事件被添加到document元素上，所以在事件被处理之前，可能回通过最长最慢的那条路径之后才能被触发。

在事件处理中调用event.stopPropagation()来阻止事件内添加到document之后的节点中，是效率很低的，因为事件已经被传播到document上。

delegate

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

jquery查找#element,并使用click事件和a这一css选择权作为参数把alert函数绑定到#element上。

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

这一过程与live类似， 但是它把处理程序绑定带具体的元素而非document这一根上，

('a').live()==document.delegate('a')?

delegata方法是一个相对完美的解决方案，但在DOM结构简单的情况在，也可以使用live().

on

其实bind，live，delegate都是通过on()来实现的，unbind，die,undelegate,也是一样的都是通过off来实现的，

在下列情况下，应该使用live或delegate，而不能使用bind

为DOM中的很多元素绑定相同事件。

为DOM中尚不存在的元素绑定事件。

用bind的代价是非常大的，他会把相同的一个事件处理程序hook到所有匹配的DOM元素上，不要再用live了，他已经不再推荐了，而且还有很多问题。

delegate会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上，