js事件捕获，事件冒泡，事件委托以及DOM事件流

一：DOM事件流：

事件流是从页面接收事件的顺序，DOM2级事件规定事件流包括三个阶段：

①事件捕获阶段：用意在于事件达到目标之前捕获它，在事件捕获阶段事件流模型：document→html→body→div

②处于目标阶段2：实际的目标到事件

③事件冒泡阶段：由最具体的元素接收到事件，然后向上传播到较为不具体的节点。事件流模型：div →body→ html→ document

二：事件委托

事件委托顾名思义：将事件委托给另外的元素。其实就是利用DOM的事件冒泡原理，将事件绑定到目标元素的父节点。

如果要为大量的元素节点绑定事件，完美可以用事件委托完美解决，直接将事件绑定在这些元素的父节点上，只需要绑定一次，就可以在所有子节点触发事件。

三：常见的事件绑定：

（1）bind()

缺点：只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件，比如内容很多的时候，网页中很多内容需要点击“下一页”的时候才会被加载，则这时新加载出的元素bind则没有给他们绑定事件。

bind（）不能使用的情况：

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

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

解决方法：使用live（）方法

(2)live()

方法会把click事件绑定到$(document)对象，而且只需要给$(document)绑定一次（不是50次，更不是5000次），然后就能够处理后续动态加载的节点的事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。

缺点：

①$()函数会找到当前页面中的所有目标元素并创建jQuery对象，但在确认事件目标时却不用这个集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；

②默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；

③只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table td").live...可以，但$("#info_table").find("td").live...不行；

④收集目标元素并创建jQuery对象，但实际操作的却是$(document)对象，令人费解。

解决方法：

①为了避免事件冒泡造成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：

$("td",$("#info_table")[0]).live("click",function() {/*显示更多信息*/});

这样，“受托方”就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。不过，与.live()共同使用的上下文参数必须是一个单独的DOM元素，所以这里指定上下文对象时使用的是$("#info_table")[0]，即使用数组的索引操作符来取得的一个DOM元素。

②使用闭包：

为了避免生成不必要的jQuery对象，可以使用一种叫做“早委托”的hack，即在$(document).ready()方法外部调用.live()：

(function($){
    $("#info_table td").live("click",function(){/*显示更多信息*/});
})(jQuery);

在此，(function($){...})(jQuery)是一个“立即执行的匿名函数”，构成了一个闭包，可以防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。（注意，使用这个hack时，脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机，因为这时候刚好document元素可用，而整个DOM还远未生成；如果把脚本放在结束的body标签前面，就没有意义了，因为那时候DOM已经完全可用了。）

③使用delegate（）方法

（3）delegate（）：

delegate（）直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；

delegate（）支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；

关于绑定语句的进化流程：

bind（）阶段：

$("info_table td").bind("click", function()；

live（）阶段：

①：$("#info_table td").live("click",function()

②：$("td",$("#info_table")[0]).live("click",function()

delegate()阶段

$("#info_table").delegate("td","click",function)