J关于JS事件冒泡与JS事件委托（事件代理）

  什么叫事件委托呢即事件代理：对“事件处理程序过多”问题的解决方案就是事件委托。例如， click 事件会一直冒泡到 document 层次。也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

1. 基本概念：

  JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。（网上用取快递来解释这个现象）

js中的事件流

  “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段与事件冒泡阶段，首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

  关于事件捕获事件冒泡以及防止可以看这篇文章：事件的三个阶段：捕获阶段 目标阶段 冒泡阶段及防止冒泡和捕获

2. 事件委托

  事件委托就是基于js的事件流产生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件

<ul id="myLinks">
	<li id="goSomewhere">Go somewhere</li>
	<li id="doSomething">Do something</li>
	<li id="sayHi">Say hi</li>
</ul>

  其中包含 3 个被单击后会执行操作的列表项。按照传统的做法，需要像下面这样为它们添加 3 个事件处理程序。

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
	location.href = "http://www.wrox.com";
});
EventUtil.addHandler(item2, "click", function(event){
	document.title = "I changed the document's title";
});
EventUtil.addHandler(item3, "click", function(event){
	alert("hi");
});

  如果在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不
清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。

var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
	event = EventUtil.getEvent(event);
	var target = EventUtil.getTarget(event);
	switch(target.id){
		case "doSomething":
			document.title = "I changed the document's title";
			break;
		case "goSomewhere":
			location.href = "http://www.wrox.com";
			break;
		case "sayHi":
			alert("hi");
			break;
	}
});

  在这段代码里，我们使用事件委托只为 <ul> 元素添加了一个 onclick 事件处理程序。由于所有列表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。

3. 事件委托的优点

• 提高性能，节约内存:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
• 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

4. 讲在后面：

4.1 DOM0与DOM2事件绑定

• DOM0级事件绑定会存在覆盖的问题，下边的代码会把上边的代码覆盖

element.onclick  = function() {};

element.onclick  = null; // 移除
// 还有一种是标签内写onclick事件

• DOM2级事件 不会覆盖，会依次执行
  监听方法: 添加和移除事件处理程序：addEventListener()和removeEventListener()。
  有三个参数： 事件类型、事件处理函数、capture（false：事件冒泡阶段执行 || true： 事件捕获阶段执行 默认为false）

4.2 适合采用事件委托技术

• 最适合采用事件委托技术的事件包括 click 、 mousedown 、 mouseup 、 keydown 、 keyup 和 keypress 。
• 虽然 mouseover 和 mouseout 事件也冒泡，但要适当处理它们并不容易，而且经常需要计算元素的位置。（因为当鼠标从一个元素移到其子节点时，或者当鼠标移出该元素时，都会触发 mouseout 事件。）

4.3 不支持冒泡事件

• ①focus
• ②blur
• ③mouseenter
• ④mouseleave
• ⑤load
• ⑥unload
• ⑦resize