js和html之间的交互是以事件实现的.
事件冒泡
事件开始的顺序从绑定事件的元素开始,逐级向父级元素传递.
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
我们给id="myDiv"的元素绑定一个click事件,当我们点击这个元素的时候,事件会按照如下传播顺序传播
(1) <div>
(2) <body>
(3) <html>
(4) document
事件捕获
事件开始的顺序从最外面的元素开始,逐级向儿子元素传递
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
我们给id="myDiv"的元素绑定一个click事件,当我们点击这个元素的时候,事件会按照如下传播顺序传播
(1) document
(2) <html>
(3) <body>
(4) <div>
目前的主流浏览器都支持事件冒泡和事件捕获,默认采用的是事件冒泡.但是我们也可以在需求的时候设置为事件捕获.
DOM事件流
在 DOM 事件流中,实际的目标（<div>元素）在捕获阶段不会接收到事件,这意味着在捕获阶段,事件从 document 到<html>再到<body>后就停止了.下一个阶段是“处于目标”阶段,于是事件在<div>上发生,并在事件处理中被看成冒泡阶段的一部分.然后,冒泡阶段发生,事件又传播回文档.
DOM0级事件处理程序
//绑定事件处理程序
//this引用当前元素
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id); //"myBtn"
};
//删除事件处理程序
btn.onclick = null;
DOM2级事件处理程序
addEventListener处理函数有3个参数,分别是要处理的事件名,作为事件处理程序的函数和一个布尔值.最后这个布尔值参数如果是 true,表示在捕获
阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序.
//绑定事件处理程序
//this引用当前元素
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
//可以添加多个事件处理程序
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
通过addEventListener的事件处理程序只能通过removeEventListener来移除.
//匿名函数无法被移除
btn.removeEventListener("click", function(){ //没有用！
alert(this.id);
}, false);
//正确的写法
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！
IE事件处理程序
IE特立独行,有两个相似的方法attachEvent()和detachEvent()与DOM 0级事件处理程序类型.
//attachEvent在全局作用域中运行
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});
attachEvent可以添加多个,但是执行顺序是相反的,最后添加的会最先执行
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert("Clicked");
});
btn.attachEvent("onclick", function(){
alert("Hello world!");
});
detachEvent移除事件处理程序,匿名函数不能移除
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
//这里省略了其他代码
btn.detachEvent("onclick", handler);
兼容写法
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("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn, "click", handler);
addHandler()和 removeHandler()没有考虑到所有的浏览器问题,例如在 IE 中的作用域问题.不过,使用它们添加和移除事件处理程序还是足够了.此外还要注意,DOM0 级对每个事件只支持一个事件处理程序.好在,只支持 DOM0 级的浏览器已经没有那么多了.
网友评论