事件对象及兼容性处理

1. 浏览器自带的行为，即使没有给元素绑定事件，事件也是存在的。比如:

onclick、onmouseover（onmouseenter）、onmouseout（onmouseleave）、onmousedown 、onmouseup （拖拽效果）、onmousewheel、onscroll、
onresize （重置浏览器窗口大小）、onload、onunload（浏览器关闭）、onfocus（文本框获取焦点）、onblur、onkeydown、onkeyup、onchange...

2. MouseEvent：鼠标事件

// DOM0级事件绑定
var oDiv = document.getElementById('oDiv');
oDiv.onclick = function (){      // 当前元素的私有属性
 console.log(arguments);     // 浏览器传入了一个参数值 MouseEvent
};

// DOM2级事件绑定
oDiv.addEventListener("click",function(){   // 定义在 EventTarget 这个类的原型上
  console.log('-----');
},false);

3. KeyboardEvent: 键盘事件

var input = document.getElementById("input");
input.onkeyup = function (e){
  e = e || window.event;
  e.keyCode;   
}

document.body.onkeyup = function(e){
  e = e || window.event;
}

4. 事件的兼容性：

事件的获取：
标准浏览器中是浏览器给方法传递的参数，只需定义形参 e 就可获取，IE6~8 中不会给方法传递参数，需用 window.event 获取。
e.target 在 IE6~8 中不存在，用 e.srcElement 获取。

document.body.onclick = function(e){
  e = e || window.event;
  e.target = e.target || e.srcElement;
  e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}

li 的 hover 在IE6 下不兼容，只有 a 标签的 hover 兼容所有浏览器。如果只是想使用 a 标签实现一些 css 效果，就要去掉 a 标签的默认行为。

var links = document.getElementsByTagName("a");
for(var i = 0; i<links.length;i++){
  links[i].onclick = function(e){
    e = e || window.event;
    // e.preventDefault ? e.preventDefault() : e.returnValue = false;
  return false;
  }
}

5. e.stopPropagation() : IE 6~8 不兼容，用 e.cancelBubble = true 替代。

---

推荐阅读：
DOM2级事件在IE6 7 8下的兼容性问题及解决方案