一. 什么是事件模型
1. 事件
事件是用户对浏览器的一个动作或者浏览器自身执行的某种动作,文档或浏览器窗口发生特定交互的瞬间。
2. 事件流
事件流:从页面中接收事件的顺序。
IE和Netscape提出了两种相反的事件流:事件冒泡流、事件捕获流。
事件冒泡流:由具体的节点逐级往上传播。
如果单击了div,那么click事件的传播为:div -> body -> html -> Document -> windows。
事件捕获流:由最上层的节点逐级往下传到具体节点。
如果单击了div,那么click事件的传播为:windows -> Document -> html -> body -> div
windows对象和Document对象的区别:
windows对象:指的是浏览器的窗口
Document对象:指的是显示于窗口的一个文档
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
3. DOM2级事件规定的事件流
W3C为了兼顾之前的标准,将事件发生定义成三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
事件捕获阶段:windows -> Document -> html -> body;
事件捕获阶段,事件到
就停止了;处于目标阶段:事件具体目标
事件冒泡阶段:body -> html -> Document -> windows;
DOM2级事件明确要求捕获阶段不会涉及到事件目标,但是很多高版本的浏览器都会在捕获阶段触发事件对象上的事件。
二. W3C和IE绑定事件
一般绑定事件可以用
obj.onclick = function(){};
但如果要给同一个元素绑定多个事件,上面那种方法就行不通了
只会alert("3"),其他的被覆盖了,可以采用下面的绑定事件的方式:
1. W3C
W3C绑定事件
obj.addEventListener(event,function,usecapture)
W3C解绑事件
obj.removeEventListener(event,function,usecapture)
usecapture可选值有false:事件在冒泡阶段执行(默认)true:事件在捕获阶段执行下面是一个冒泡阶段和捕获阶段执行事件的例子:
如果用addEventListener给同一个对象绑定了多个事件,执行顺序如下:
1.按照绑定的顺序执行
obj.addEventListener("click