基本概念：DOM事件的级别
DOM0：element.onclick=function(){}
DOM1：(没有设计和事件相关的东西)
DOM2：element.addEventListener('click',function(){},false)
DOM3：element.addEventListener('keyup',function(){},false)
DOM事件模型
指的就是冒泡或捕获
DOM事件流
事件流含义，如 ：点击鼠标的事件如何传递到页面上，这就是事件流。
完整事件流三个阶段：捕获、目标阶段、冒泡
描述DOM事件捕获的具体流程
捕获：window->document->html->body->....->目标元素
冒泡：与捕获相反
Event对象的常见应用
- event.preventDefault()
阻止默认行为 - event.stopPropagation()
阻止冒泡行为 - event.stopImmediatePropagation()
事件响应优先级如，
一个按钮，同时注册了两个click事件A和B，如果想在A执行的时候不执行B，则在A事件的函数里加上event.stopImmediatePropagation()就会阻止B的执行 - event.currentTarget & event.target
currentTarget始终是监听事件者，而target是事件的真正发出者
自定义事件
var event = new Event('custom')
DOM.addEventListener('custom',function(){
console.log('custom')
})
DOM.dispatchEvent(event)
兼容性：
在 IE 中使用 attachEvent()与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。在使 用 DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行;在使用 attachEvent()方 法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。来看下面的例子。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});
在编写跨浏览器的代码时，牢记这一区别非常重要。
//兼容DOM0级方法、DOM2级方法和IE方法
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){ //DOM2
element.addEventListener(type, handler, false);
} else if (element.attachEvent){ //IE 了在 IE8 及更早版本中运行，此时的事件类型必须加上"on"前缀
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler; //DOM0
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
} }
};
//注意：addHandler()和 removeHandler()没有考虑到所有的浏览器问题，例如在 IE 中的作用域问题。不过，使用它们添加和移除事件处理程序还是足够了。此外还要注意，DOM0 级对每个事件只支持一 个事件处理程序。好在，只支持 DOM0 级的浏览器已经没有那么多了，因此这对你而言应该不是什么 问题。
