事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别

如何使用事件？以及IE和标准DOM事件模型之间存在的差别？

---

1. 关于事件流

1.1 IE的事件流：事件冒泡
  由事件的目标(event.srcElement)接受事件，然后逐级向上（例：下一个为包含event.srcElement的节点传递事件,直到文档节点document;
1.2 其他浏览器支持的另一种事件流：事件捕获
  与事件冒泡正好相反，文档节点document先监听到事件，然后把事件逐级向下传递事件，直到目标节点event.target；
1.3 DOM事件流
  DOM2级事件规范的事件流综合了以上两种，把事件流分为了以下三个阶段：
  1.3.1 事件捕获阶段
    不涉及事件目标，或者说这个阶段在目标之前就结束了；
  1.3.2 处于目标阶段
    被看作冒泡阶段的一部分，所以可以在冒泡阶段在目标事件上操作事件；
  1.3.3 事件冒泡阶段
1.4 规范和浏览器实现的差别
  DOM2级事件规范的捕获阶段，事件从文档节点document开始传播，现代浏览器大多数都是从window对象开始传播事件的；
  DOM2级事件规范捕获阶段不涉及事件目标，现代浏览器大多数都在这个阶段包含事件目标。

2. 如何使用事件？以下是几种用来响应事件的事件处理程序
   HTML事件处理程序|DOM0级事件处理程序|DOM2级事件处理程序|IE的事件处理程序(IE11以下)

2.1HTML事件处理程序
  2.1.1 指定事件:Click Me!
  2.1.2 优缺点:简单，但是与HTML代码紧密耦合，更改不方便;
  2.1.3 删除事件:同DOM0的删除事件处理方式;
2.2 DOM0级事件处理程序
  2.2.1 指定事件:document.onclick = function(){alert("document has been clicked")};
  2.2.2 删除事件:document.onclick = null;
  2.2.3 优缺点:简单且跨浏览器
  2.2.4 实质: 为元素指定方法(栗子中为document指定onclick方法)，移除方法，所以其处理程序是在元素的作用域运行的；
2.3 DOM2级事件处理程序
  2.3.1 指定事件:addEventListener("引号括起来的事件名"， 触发事件后调用的事件处理程序, 是否在捕获节点调用时间处理程序的布尔值)
    栗子:var funA = function(){alert(" DOM2级事件处理程序")};
          document.addEventListener("click", funA, false);
  2.3.2 删除事件: document.removeEventListener("click", funA, false);
    如果指定的处理程序是匿名函数则不能删除，因为没有函数名;
  2.3.3 优缺点: 可以添加多个监听事件，缺点见2.3.2;
2.4 IE的事件处理程序(IE11以下，IE11及Edge用的DOM2级事件处理程序)
  2.4.1 指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")});
  2.4.2 删除事件: detachEvent("onclick", funA);
    如果指定的处理程序是匿名函数则不能删除，因为没有函数名;
  2.4.3 优缺点:可以添加多个监听事件，缺点见2.4.2;

3. IE和标准DOM事件模型之间存在的差别

3.1 这里的IE是IE11以下;
3.2 参数的差别: attachEvent()的第一个参数比addEventListener()的事件名多一个"on"，
    且没有第三个参数，因为IE事件模型只支持冒泡事件流;
3.3 事件处理函数作用域的区别: IE中事件处理程序处于全局作用域，其内的this会指向window;
    而用DOM（0或2）级事件的事件处理程序的作用域是元素作用域，其内的this指向其所属的元素
    例: document.addEventListener("click", function(){ 
            if(this == document){
              alert("此时this指向document");
            }
          }, false);
3.4 事件对象event的属性方法的差别
        IE                    DOM
cancelBubble = true    stopPropagation() //停止冒泡
returnValue = false    preventDefault() //阻止元素默认事件
srcEelement            target //事件目标