DOM事件类

基本概念：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 级的浏览器已经没有那么多了，因此这对你而言应该不是什么 问题。