事件流
Dom0级事件规定事件流顺序:事件捕获,处于目标阶段,事件冒泡。而常见的事件流,分为冒泡流和捕获流。
事件冒泡
IE的事件流叫做叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbking Example</title>
</head>
<body>
<div id="myDiv"> Click me</div>
</body>
</html>
click事件沿DOM树向上传播,在每一级节点上都会发生,直至传播到document对象。如图:
事件捕获
相反,事件捕获是从document开始,逐步往最内层捕获。
事件处理程序
事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以“on”开头。
事件指定处理程序的方式:HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序、IE事件处理程序、跨浏览器的事件处理程序
1.HTML事件处理程序
某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。
<input type="button" value="Click Me" onclick="alert('Clicked')" />
缺点:
(1)存在一个时差问题。因为用户可能会在HTML元素一出现在页面行就触发相应的事件,但当时的事件处理程序有可能尚未不具备执行条件。
(2)扩展事件处理程序的作用链在不同浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异,很可能在访问非限定对象成员时出错。
(3)HTML与JavaScript代码紧密耦合,如果更改事件处理程序,就要改动两个地方:HMTL代码和JavaScript代码。
2.DOM0级事件处理程序
摒弃HTML事件处理程序而使用JavaScript指定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。这种事件处理程序赋值的方法是在第四代Web浏览器中出现。
优点:
(1)简单(2)具有跨浏览器的优势
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
}
使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的事件处理程序是在元素的作用域中运行的。
3. DOM2级事件处理程序
使用事件监听,情景在于添加几个处理程序。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,按照添加它们的顺序进行触发。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world");
}, false);
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时的使用的参数相同,这意味着通过addEventListener()添加的匿名函数将无法移除。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", funtion(){
alert(this.id);
},false);
//这里省略了其他代码
btn.removeEventListener("click", funtion(){ //没有用
alert(this.id);
},false);
var btn = document.getElementById("myBtn");
var handler = funtion(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容各种浏览器。
兼容性:IE9、Firefox、Safari、Chrome和Opera支持DOM2级事件处理程序。
4.IE事件处理程序
IE实现了与DOM类似的两个方法:attachEvent()和detachEvent()。接受相同的两个参数:事件处理程序名称与事件处理程序函数。
与DOM事件处理程序的区别:
(1)在使用DOM0级方法的情况下,事件处理程序会在其所属元素的作用域内运行;在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。
(2)attachEvent()方法可以用来为一个元素添加多个事件处理程序,但不是以添加它们的顺序执行,而是以相反的顺序被触发。
var btn = document.getElementById("btn");
btn.attachEvent("onclick", function () {
alert("Clicked");
});
兼容性:只支持IE和Opera。注:经过自己试验,IE11不支持。
5. 跨浏览器的事件处理程序
方法:使用能够隔离浏览器差异的JavaScript库(如jQuery),还有是自己开发最合适的事件处理的方法。
要保证处理事件的代码能在大多数浏览器下一致地运行,只需关注冒泡阶段。
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on", type, handler);
} else {
element["on" + type] = handler;
}
},
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;
}
}
};
var btn = document.getElementById("btn");
var handler = function () {
alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
参考作者原文链接:https://blog.csdn.net/a2013126370/article/details/82290180