事件流描述的是从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程,就是事件流。
1.IE的事件流:
IE中的事件流叫事件冒泡即:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象。
2.标准浏览器的事件捕获流:
捕获事件即:事件从document对象开始,然后事件一级一级往下传,直到最具体的元素为止,刚好和冒泡事件相反。
3.事件处理程序:
(1)HTML事件处理程序(即事件写在HTML文档页面中)。
(2)DOM0级事件处理程序。
(3)DOM2级事件处理程序。
DOM2级事件定义两个方法:用于处理指定和删除事件处理程序的操作即:addEventListner()和removeEventListner()。他们都要接受三个参数:要处理的事件名、事件处理函数以及boolean值(true表示捕获事件流,false表示冒泡事件流)。而IE事件处理程序的函数为:attachEvent()和detachEvent()。他们只接受两个参数:要处理的事件名、事件处理函数。
DOM0级与DOM2级的简单实例如下:
a.使用DOM0级,在向同一事件(比如onclick)添加处理函数时,只能添加一个,如果添加了两个,后面的会覆盖前面的:
element.onclick = clickHandler1;
element.onclick = clickHandler2; //clickHandler2会覆盖clickHandler1.
b.而使用DOM2级,可以向同一事件添加多个处理函数:
element.addEventListener('clcik',clickHandler1,false);
element.addEventListener('clcik',clickHandler2,false);
注:现在的浏览器默认是采用的是事件冒泡;在DOM0级方法绑定事件只能是事件冒泡,不能设置;在DOM2级你可以设置是用事件冒泡还是事件捕获。
下面重点讨论一下DOM0级事件处理程序:
a. 使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此是在元素的作用域中运行,换句话说,程序中的this引用的是当前元素。
<span style="font-size:14px;"><script type="text/javascript">
var div_id = document.getElementById("div_id");
div_id.onclick = function(){
alert(this.id); //div_id
};
</script></span>
可以在事件处理程序中通过this访问元素的任何属性和方法,
以这种方式(即DOM0级)添加的事件处理程序会在事件流中的冒泡阶段被处理。
b.可以删除通过DOM0级方法指定的事件处理程序,只要将事件处理程序属性的值设为null即可。
<span style="font-size:14px;"></span><pre name="code" class="javascript"><span style="font-size:14px;"><script type="text/javascript"></span>
btn.onclick = null; //删除事件处理程序</script>
c.在DOM0级事件处理程序中取消冒泡事件的封装函数。
<span style="font-size:14px;">function stopPro(e) { //e指事件处理函数中的event参数。
if (e && e.stopPropagation) {
//W3C取消冒泡事件
e.stopPropagation();
} else {
//IE取消冒泡事件
window.event.cancelBubble = true;
}
};</span>
d.事件冒泡的例子如下:
<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#child{
background: red;
width:50px;
height:50px;
}
#father{
width:100px;
height:100px;
background:green;
}
#grandparent{
width:150px;
height:150px;
background:black;
margin:100px auto 0;
}
</style>
</head>
<body>
<div id='grandparent'>
<div id='father'>
<div id='child'></div>
</div>
</div>
</body>
<script type="text/javascript">
var grandparent = document.getElementById("grandparent");
var parent = document.getElementById("father");
var child = document.getElementById('child');
var html = document.getElementsByTagName("html")[0];
var body = document.body;
child.onclick = function () {
console.log("我是儿子");
}
parent.onclick = function () {
console.log("我是父亲");
}
grandparent.onclick = function () {
console.log("我是爷爷");
}
window.onclick = function () {
console.log("我是window");
}
document.onclick = function () {
console.log("我是document");
}
html.onclick = function () {
console.log("我是html");
}
body.onclick = function () {
console.log("我是body");
}
</script>
</html></span>
下面是事件流的相关教程链接:
(1)http://www.cnblogs.com/blackwood/archive/2013/03/14/2959195.html (一)
(2)http://www.cnblogs.com/blackwood/archive/2013/03/15/2961006.html (二)
(3)http://www.runoob.com/jsref/dom-obj-event.html(HTML DOM事件教程)
PS:猿猿们有什么意见和建议可以留言给我呦!