标签：
本课我将讲述js中的事件及一些浏览器兼容问题
本章主要从以下几个方面讲起：1.事件流 2.事件的浏览器兼容 3.鼠标，键盘事件
1. 事件流
什么叫事件流？
描述的是事件接受的顺序。这句话听起来 还是不怎么容易理解。那么我就 结合两中事件流的方式具体来说一下
事件流有两种方式：冒泡方式, 捕获方式。
对于下面这个页面来说
<!DOCTYPE html> <html onclick="#"> <head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="index.css"/> <script type="text/javascript" src="index1.js" charset="gbk"></script> </head> <body onclick="#"> <div id="content" onclick="#"> <span id="start" onclick="#">开始</span> <span id="stop">停止</span> </div> </body> </html>
如果是冒泡方式的话，那么假如你点击的是start这个元素的话，那么会第一响应start这个span的点击事件，但是这个span是在id=content这个div中的，所以你点击这个span其实也就是点击了它的父辈div，以此类推，也就是点击了body，点击了html，所以这几个元素的点击事件都会响应。冒泡方式就是从点击最具体的位置开始响应，然后往父辈元素响应，一层一层的往外冒泡，所以取名叫冒泡方式。
捕获事件就是与冒泡事件恰恰相反，就是它是从最外面的父层开始响应事件，然后慢慢往子元素递进。
一般IE浏览器采取的方式都是冒泡方式的
2.事件兼容问题
其次，就事件的方式来说，有三种事件方式：HTML事件，DOM0,DOM2.三种事件方式。
首先来说一下什么事html事件方式
我们通常给一个按钮附加点击事件，如下所示：
<input type="button" id="input" onclick="function(){.....}"/>
或者
<input type="button" id="input" onclick="play()"/>
<script type="text/javascript" >
function play(){
.....
}
</script>
DOM0级事件处理方式：
<script type="text/javascript">
Object.onclick=function(){
....
}
如果想取消这个点击事件，只需要下面操作
Object.onclick=null;
</script>
DOM2级事件处理方式
<script type="text/javascript">
Object.addEventListener("EventType",function,value);//这种方式给某个元素绑定某个事件，其中EventType是事件类型，比如click，mouseout等，function指的是要调用的事件名，value表是的是布尔值，flase表示的冒泡方式，true表示的是事件捕获方式。
Object.removeEventListener("EventType",function,value);
在IE中DOM2的方式有点不一样
Object.attachEvent("EventType",function),只有两个参数，跟上面一样，没有value这个参数，因为IE中默认的是冒泡形式。
Object.detachEvent("Event TYpe",function)一样的用来解除这个事件。
</script>
其中千万要注意一点。就是不管DOM0级还有DOM2级中的IE中的方式，事件前面都有on例如onclick，onmouseover,等但是在DOM2级中的addEventListener方式中事件前面不要加on，例如click.
标签：
原文地址：http://www.cnblogs.com/yuaima/p/5080013.html
