事件机制

JavaScript和HTML的交互是通过事件实现的。
而事件是某个行为或者触发，比如点击、鼠标移动、滚动窗口、键盘输入等。

DOM0、DOM2级的事件区分

DOM0事件绑定监听函数比较简单, 有两种方式:

HTML代码中直接绑定:
<input type="button" onclick=alert("hello") class="btn">

通过JS代码指定属性值:
var btn = document.getElementById('.btn');
btn.onclick =alert("hello")

移除监听函数：

btn.onclick = null;

DOM0的事件具有极好的跨浏览器优势, 会以最快的速度绑定，同时相同事件只能覆盖，不会连续触发。

DOM2级事件
DOM2通过addEventListener、removeEventListener绑定和删除事件, 比如

<input id="btnClick" type="button" value="Click Here" />

<script>
    var handler = function(){
       alert("hello")
  }
    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', handler)     //   绑定
    btnClick.removeEventListener('click',handler)   //  删除
</script>

而这两个方法都接收三个参数，分别为：
1、事件类型
2、事件处理方法
3、布尔值（true表示在捕获阶段调用事件处理程序，false表明在事件冒泡阶段处理）

IE则DOM2通过attachEvent、detachEvent绑定和删除事件，比如：

<input id="btnClick" type="button" value="Click Here" />

<script>
    var handler = function(){
       alert("hello")
  }
    var btnClick = document.getElementById('btnClick');
    btnClick.attachEvent('onclick', handler)     //   绑定
    btnClick.detachEvent('onclick',handler)   //  删除
</script>

这两个方法则接收两个参数，分别为：
1、事件处理程序名称
2、事件处理程序方法

addEventListener和attachEvent主要区别如下：

一、参数个数不相同 addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

二、第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

三、事件处理程序的作用域不相同，addEventListener的作用域是元素本身，而attachEvent事件处理程序会在全局变量内运行

四、为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律

而兼容两种不同方法，可以借鉴以下John Resig的代码：

function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {         // 支持addEventListener方法则调用
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}

在取消事件处理程序的时候

function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {   // 支持removeEventListener方法则调用
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

事件冒泡、捕获

事件捕获：当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式绑定了对应的事件的话，会先触发父元素绑定的事件。

如：

document  (1)
      |
   html  (2)
      | 
   body   (3)
      | 
    div    (4)
      | 
   target  (5)
事件执行顺序从1到5

事件冒泡：与事件捕获相反，事件顺序是由内到外进行事件传播，直到根节点。（IE只支持该类型）
如：

document  (5)
      |
   html  (4)
      | 
   body   (3)
      | 
    div    (2)
      | 
   target  (1)
事件执行顺序从1到5

而DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

相当于

(1)   document  (9)
        |
(2)    html     (8)
        | 
(3)    body   (7)
        | 
(4)     div    (6)
        | 
(5)    target  (5)

DOM0、DOM2级的事件区分

事件冒泡、捕获

推荐阅读更多精彩内容