JS事件委托

【转】http://www.kuqin.com/shuoit/20150524/346218.html

　　由于有着各种各样的背景，所以不是每个人都对javaScript及其基本原理有广泛的认识。通常来说，除非去参加面试才去思考为什么这么做，否则Javascript只是你工作的内容。

事件委托

　　事件委托是一种由其它元素而非时间目标元素来响应事件产生的行为的思想。用document元素来处理按钮的点击行为就是事件委托的一个例子，另一种常见情况是，用ul元素来处理其子元素li的事件。

　　有多种方法来处理事件委托。标准方法来源于原声浏览器的功能。浏览器以一种特定的工作流程来处理时间，并支持事件捕获和事件冒泡。一些JS库和框架公开了其它方式，如发布/订阅模型。

　　事件捕获和事件冒泡是事件流中的两个阶段，任何事件产生时，如点击一个按钮，将从最顶端的容器开始（一般是html的根节点）。浏览器会向下遍历DOM树，知道找到出发事件的元素。一旦浏览器找到该元素，事件流就进入事件目标阶段，在该阶段完成后，浏览器会沿着DOM树向上冒泡直到最顶层的容器，看看是否其他元素需要使用同一个事件。

　　大多数现代库使用冒泡监听，而在捕获阶段处理。浏览器包含一个方法来管理事件冒泡。事件处理程序可以调用stopPRopagation告诉DOM事件停止冒泡，第二个方式是调用stopImmediatePropagation，它不仅停止冒泡，也会阻止这个元素上其他监听当前事件的处理程序触发。然而，定制传播事件事一定要小心，因为你不知道是否有其他上层的DOM元素可能需要知道当前的事件。第三个方式可以控制元素如何对事件作出回应的方法，所有现代浏览器支持preventDefault方法，这个方法会阻止浏览器处理事件的默认行为。一个常见示例就是链接，使用链接执行UI操作是一种常见的做法。然后，当我们不希望链接跟普通被激活的链接一样会在新标签页打开一个新页面，就可以使用preventDefault方法来阻止这个默认行为。

　　还有其它实现事件委托的方法可以考虑，其中值得一提的就是发布/订阅模型。发布/订阅模型也称为了广播模型，牵涉到两个参与者。通常，两个参与者在DOM中并没有紧密的联系，而且可能是来自兄弟的容器。可以给它们共同的祖先元素设置监听处理程序，但是如果共同的祖先元素在DOM树中处于较高层次（离根节点比较近），就会监听很多同辈元素的事件，会造成意想不到的结果；当然，也可能存在逻辑或结构原因要分开这两个元素。

　　发布/订阅模型也能自定义事件。发布/订阅模型从一个元素发送消息后并向上遍历，有时也向下遍历，DOM会通知遍历路径上的所有元素事件发生了。在下面的示例中，JQuery通过trigger方法传递事件。例如：http://jsfiddle.net/dposin/7983sjk7/

<br /><div id="container" style="border: 1px solid black; width: 100px; padding: 20px"><button id="button2">Trigger Me</button><div id="insertText" style="padding: 10px;"></div></div><br/><div id="EventListing"></div>

$('#container').on('myCustomEvent', function (e, data) {    $('#insertText').append(data);});$('#button2').click(function () {    $('#button2').trigger('myCustomEvent', ['I triggered']);});