标签：
javascript原生的事件，总结了一下，包括事件流、处理函数、事件对象这几样东西。而在兼容性方面，主要是老牌ie8以及以下和现代浏览器的差异，也就是ie和DOM事件标准的差异。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
<script>
document.getElementById(‘a‘).onclick = function(event){
event = event || window.event;
alert(event);
}
</script>
</body>
</html>
c、DOM2事件绑定
主要指的是元素的addEventListener（）和removeEventListener（）。前者绑定，后者删除。
这两个函数都有三个参数，
第一个是事件类型，有click，focus，blur等
第二个是事件处理函数。
第三个是个布尔值，true代表在捕获阶段调用处理函数，false代表在冒泡阶段调用处理函数。
要绑定事件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
<script>
document.getElementById(‘a‘).addEventListener(‘click‘,function(event){
alert(event);
},false)
</script>
</body>
</html>
假如想解除绑定，有人可能会这样：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
<script>
document.getElementById(‘a‘).addEventListener(‘click‘,function(event){
alert(event);
},false)
document.getElementById(‘a‘).removeEventListener(‘click‘,function(event){
alert(event);
},false)
</script>
</body>
</html>
但是这样是不会成功的。因为函数是一个对象，两个匿名函数是不同的对象，不相等。所以匿名函数是没办法解绑的。只能想下面这个，个函数一个名号。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="##" id="a" style="display:block;width:100px;height:100px;background-color: #ccc;"></a>
<script>
var handler = function(event){
alert(event);
}
document.getElementById(‘a‘).addEventListener(‘click‘,handler,false)
document.getElementById(‘a‘).removeEventListener(‘click‘,handler,false)
</script>
</body>
</html>
ie8-的浏览器不支持DOM2级事件，但是有类似的方法attachEvent（）和detachEvent（）；用法上是一样的，只是因为ie8-只有冒泡过程所以就没有第三个参数。还有第一个参数要加个‘on’，比如click事件是‘onclick‘。另外，函数内this指向window。
事件对象
在js中所有的事件对象都继承自Event。在chrome（左）和firefox（右）中Event对象的样子。 
可以看到在浏览器中Event对象还是有点区别的。但是下面的属性和方法是公用的。
| bubbles | 是否冒泡 |
| cancelable | 是否可以取消默认行为 |
| currentTarget | 目前元素 |
| target | 目标元素 |
| defaultPrevented | 是否已被阻止默认行为 |
| type | 事件类型 |
| eventPhase | 事件流哪个阶段1捕获 2目标 3冒泡 |
| detail | 一些信息 |
| trusted | js创建的为false，浏览器创建为true |
| view | 等同于window |
| preventDefault() | 阻止默认行为 |
| stopPropagation() | 阻止冒泡和捕获 |
| stopImmediatePropagation() | 立即阻止冒泡和捕获 |
在ie8—中事件对象，是这个样子：
| cancelBubble | 是否取消冒泡，为true先顶一下stopPropagation（） |
| returnValue | 返回值，为false相当于preventDefault（） |
| srcElement | 目标元素，相当于target |
| type | 事件类型 |
| clientX、clientY | |
| which | 1、左 2、右 3、中 |
| detail | 单击次数 |
| ctrlKey | |
| altKey | |
| metaKey | |
| shiftKey | |
| pageX、pageY | |
| screenX、screenY |
| clientX、clientY | |
| button | 0：没按下，1：主鼠标，2：次鼠标，3：同时按下主次按钮，4：中间按钮，5：主和中间按钮，6：按下次和右鼠标，7：三个都按下 |
| offsetX、offsetY | |
| ctrlKey | |
| altKey | |
| metaKey | |
| shiftKey | |
| fromElement | mouseover |
| toElement | mouseout |
if ( !event.which && button !== undefined ) {
event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
}
用位与运算，把button的1、3、5、7修正为1；2,6修正为2；
charCode = event.charCode || event.keyCode
标签：
原文地址：http://www.cnblogs.com/dq-Leung/p/4347935.html
