事件流描述的是从页面中接收事件的顺序
1)事件冒泡流(IE事件流):由内到外
事件开始时由最具体的元素(node)接收,然后逐渐向上传播(至文档document)
2)事件捕捉流(Netscape事件流):由外至内
不太具体的节点最先接收到事件,事件到达预定目标之前捕捉
3)DOM事件流:事件捕获——目标——事件冒泡(对事件作出响应)
区别
- 事件流的执行顺序不一样
<body>
<div>
<button id = 'btn'>点击<button>
</div>
</body>
1.事件冒泡(ie):button-div-body
2.事件捕捉:body-div-button
3.dom事件流:body-div-button-button-div-body
- IE和DOM事件监听函数
IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定
DOM使用:
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定
- 事件参数,this指向不一样
attachEvent
接收两个参数,第一个参数是事件名称,第二个参数fnHandler回调处理函数,
this指向window
addEventListener
接收三个参数:
第一个参数:事件名称,没有on开头
第二个参数:回调处理函数
第三个参数:true或false
回调函数在事件传递过程中是在捕获阶段或冒泡阶段调用
可以在dom元素绑定多个事件处理器,并且处理函数内部,this指向被绑定的dom元素