如何使用事件?以及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 //事件目标