DOM-10【冒泡捕获流-事件与事件源对象-事件委托】

一、冒泡捕获流

（1）事件流

描述从页面中接收事件的顺序，和冒泡捕获有关

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

Netscape提出的事件捕获流（Event Capturing）

（2）执行顺序

事件捕获阶段

处于目标阶段

事件冒泡阶段

（3）DOM级别

1. DOM0：
   onXXX = “”
   elem.onXXX = function(){}

2. DOM1：
   没有定义事件模型

3. DOM2：
   addEventListener(三个参数) => W3C规范
   removeEventListener

DOM0~DOM2就是三种规范

二、事件与事件源对象

（1）事件对象

事件对象就是对事件触发以后的详细信息

事件对象是存在事件处理函数参数里面的，只有IE的事件对象是存在window里面

兼容写法：

（3）事件源对象

target、srcElement指向事件源对象

火狐只有target

IE9以下只有srcElement

兼容写法：

三、事件委托

（1）事件委托

事件源被触发了以后会冒泡给父级

不亲自绑定事件，把事件委托给父级，让父级去触发，触发了以后通过事件源对象找到触发的元素

通过事件源对象可以知道具体点击的是哪一个子元素

事件是不需要绑定的，所以当你点击li的时候它也会冒泡

（2）输出子集下标

1.事件源比对

循环一遍，拿点击的事件源和li相比对，如果相等就打印i

2.indexOf

Array.prototype.indexOf.call(DOM对象集合, 当前事件源)

四、作业

todolist