W3C DOM2 Event规范
DOM 事件？
就是浏览器检测到某种操作并执行相应事件的过程。
事件类型：
1. 对象事件
load和unload
a) 适用于javascript对象和dom对象
b) load的涵义 ： 页面或者图片载入成功
c) window.onload 缺陷必须等在页面所有元素加载完成才能执行，如果包含很多图片执行脚本时就会有明显的停顿。使用css引入则不会有这个问题。
error
a) 图片载入失败会执行的函数
b) 和load事件配合使用监听图片载入
示例代码:
var img = document.createElement("img");
addEvent(img,load,function(){alert("ok")});
addEvent(img,error,function(){alert("error")});
img.setAttribute("src",......);
2. 鼠标事件
a) mousemove 鼠标移动时会一直触发
b) mouseover 和 mouseout
html结构
<div id="first"> <div id="second"></div> </div>
对于这种结构如果都注册了mouseover和mouseout事件就会发生问题， 如果鼠标从first移动到second就会触发first的mouseout事件但实际second还是在first中的。
c) mousedown 鼠标单击是也会触发move
d) 如果在mousedown和mouseup事件之间移动了鼠标则不会触发click事件。
3. 键盘事件
只是用于document
4. 表单事件
a) submit 和 reset
b) blur 和 focus
c) change 适用于 select input textarea等
5. DOM事件
ie不支持
事件流和事件监听器
两个阶段：冒泡阶段和捕获阶段
三种模型
IE浏览器： 采用的事件流是冒泡阶段
Netscape： 采用的是捕获阶段
W3C标准： 为了屏蔽差异将两个阶段结合起来 先执行捕获阶段，在执行冒泡阶段。
用户在事件注册时可以 通过false选择捕获阶段
通过true选择冒泡阶段
阻止默认事件:
javascript代码
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
阻止事件冒泡：
javascript代码
if(event.stopPropagation){
event.stopPropagation(); //W3C标准
}else{
event.cancelBubble = true; //IE浏览器
}
事件注册：
a) 嵌入的事件注册 为标签的属性指定一个函数值
例如：
<div onclick="test()">test</div>
好处： 所有的浏览器都支持这种事件注册的方法。
缺点：
1. 不符合W3C的标记与行为分开的准则
2. 不能注册多个方法
3. 如果要为多个标签注册相同事件 会有大量重复代码
b) 传统的事件模型 为DOM节点的属性添加一个方法
例如
var div = document.getElementById("test");
div.onclick = function(){} //注册事件
div.onclick = null //注销事件
好处： 比起之前的嵌入式注册 将标记和行为进行了分离。
也是不针对特定的浏览器
缺点： 如果监听器多了 代码会比较混乱 不容易维护
没办法指定事件流顺序
c) 后来ie提出了一种事件注册的机制
示例代码
element.attachEvent("type",listener);//注册事件
element.detachEvent("type",listener);//注销事件
好处 ： 思路清晰 可以绑定多个事件
缺点： 这种模型只在ie浏览器下可以使用
于标准相比 ie中的listener只是一个引用this指针还是指向定义的环境 大多数是window对象
不支持捕获模型
d) W3C DOM事件模型
示例代码
element.addEventListener("type",listener,boolean); //注册事件
element.removeEventListener("type",listener,boolean); //注销事件
e) 多种模型下的手工模拟事件
示例代码
element.onclick() //传统事件中 可以通过直接调用这个方法模拟click 但是没有event对象
element.fireEvent("onclick"); // ie浏览器中 这种方法有event对象
var event = document.createEvent("MouseEvent"); //W3C的的事件模拟
event.initMouseEvent(.......); //具体参数请查阅W3C可以通过event.data设置event的值
element.dirpatchEvent(event);
事件绑定：
W3C中：
addEventListener
IE中：
attachEvent
二者的不同之处在于对于事件句柄的处理，W3C中事件句柄的执行环境就是绑定的对象，而Ie中执行环境则是window。换句话说，函数中得this指向不同，W3C中指向node，ie中执行window。
因此需要在ie中进行一个事件转换。
访问事件对象
每次发生一个事件时都会有一个事件对象，在W3C 事件模型中事件监听器取得一个表示事件本身的对象参数而在ie中则会将事件放入window.event属性中。
W3C事件的属性：
currentTarget 表示当前事件目标
target 最早调用事件的目标
type
MouseEvent
button属性
获取鼠标位置
clientY 指的是鼠标相对浏览器顶端的距离
pageY 只能在safari中使用 鼠标相对于文档顶端的距离