八 、冒泡捕获流、事件与事件源对象、事件委托

八 、冒泡捕获流、事件与事件源对象、事件委托

一、冒泡捕获流

事件流：页面中接收事件的顺序。

IE提出的 事件冒泡流（Event Bubbling）；

网景公司提出的 事件捕获流（Event Capturing）

三个阶段的规范：

• DOM0：onxxx句柄绑定事件的形式
• DOM1：没有定义这个事件模型
• DOM2：addEventListener(type, fn, false)，removeEventListener()->w3c规范

事件流三个阶段：

• 捕获阶段
• 目标阶段
• 冒泡阶段

通过点击事件来说明事件流的冒泡和捕获过程：

冒泡过程：点击事件源，事件源的绑定事件正常执行，再往父级一级一级传递相同事件，直到顶层。

捕获过程：点击事件源，事件源的绑定事件先不执行，找到相同事件类型的顶层父级，一级一级向内触发，一直到事件源正常执行。

二、事件与事件源对象

事件对象：事件触发后的详细信息，会包装成一个对象——>传到事件处理函数的参数中去（这个参数可以起任意名字，一般叫e，ev，event…）。

打印一下事件对象：

注：对象前面的PointEvent是这个事件对象的构造函数名。

Event对象 = new PointEvent();

IE的事件对象不在事件处理函数内部，在window上，为：window.event

---

事件对象中的两个属性srcElement（IE中只有srcElement），target（火狐中只有target），都指向事件源对象。

所以不仅事件对象需要兼容性写法，事件源对象也需要兼容性写法。

事件源的兼容性：

ele.onxx = function(e){
   
    // 事件对象兼容性
    // 事件源对象兼容性
    var e = e || window.event,
        tar = e.target || e.srcElement;
}

三、事件委托（事件代理）

事件委托利用事件冒泡，可以只使用一个事件处理程序来管理一种类型的事件。

用途：

1. 想要在大量子元素中单击任何一个都可以运行一段代码，可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。
2. 自身不亲自绑定事件，让父级来进行绑定，通过冒泡机制来触发父级上的绑定的事件处理函数，然后通过事件源对象e.targete||e.srcElement来获取子元素节点

---

点击button增加li元素，并增加对应标签内容；同时点击不同li输出对应标签内容</