如何使用事件？以及IE和标准DOM事件模型之间存在的差别？
- 关于事件流
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级事件规范捕获阶段不涉及事件目标，现代浏览器大多数都在这个阶段包含事件目标。
- 如何使用事件？以下是几种用来响应事件的事件处理程序
HTML事件处理程序|DOM0级事件处理程序|DOM2级事件处理程序|IE的事件处理程序(IE11以下)
2.1HTML事件处理程序
2.1.1 指定事件:<button type="button" onclick="alert('响应事件的处javascript代码，可以用全局的函数')">Click Me!</button>
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;
- 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 //事件目标
网友评论