一、冒泡捕获流
(1)事件流
描述从页面中接收事件的顺序,和冒泡捕获有关
IE提出的事件冒泡流(Event Bubbling)
Netscape提出的事件捕获流(Event Capturing)
(2)执行顺序
事件捕获阶段
处于目标阶段
事件冒泡阶段
(3)DOM级别
-
DOM0:
onXXX = “”
elem.onXXX = function(){} -
DOM1:
没有定义事件模型 -
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