一. jQuery事件传播
在DOM2级事件模型中，一旦事件被触发。事件流首先从DOM树顶部（文档节点）向下传播。直到目标节点。然后再从目标节点向上传播到DOM树顶。从上到下的过程被称为捕获阶段。从下到上的过程被称为冒泡阶段。
利用循环体结构分别为button元素及其全部父级节点注冊一个捕获型鼠标单击类事件处理函数。
代码演示样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery addEventListener demo</title>
</head>
<body>
<input type="button" value="Event对象">
<p>捕获型事件流传播过程：</p>
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" >
window.onload = function(){
var btn = document.getElementsByTagName("input")[0]; //获取按钮
var p = document.getElementsByTagName("p")[0]; //p元素
var i = 1; //声明并初始化一个暂时变量
do{ //使用do循环结构逐层注冊鼠标单击事件
btn.addEventListener("click", function(){ //注冊鼠标单击事件
p.innerHTML += "<br />(" + i++ + ") " + this.nodeName;
},true); //动态跟踪当前响应节点的名称
btn = btn.parentNode; //訪问上一级父元素
} while(btn); //设置循环条件，假设存在父节点
}
</script>
</html>
以下改动addEventListener()方法的第3个參数，设置參数值为false，即注冊事件为冒泡型处理程序。
<script type="text/javascript" >
window.onload = function(){
var btn = document.getElementsByTagName("input")[0]; //获取button
var p = document.getElementsByTagName("p")[0]; //p元素
var i = 1; //声明并初始化一个暂时变量
do{ //使用do循环结构逐层注冊鼠标单击事件
btn.addEventListener("click", function(){ //注冊鼠标单击事件
p.innerHTML += "<br />(" + i++ + ") " + this.nodeName;
},false); //动态跟踪当前响应节点的名称
this.removeEventListener("click",arguments.callee,false); //注销当前鼠标单击事件
btn = btn.parentNode; //訪问上一级父元素
} while(btn); //设置循环条件，假设存在父节点
}
</script>
二. jQuery事件流
代码演示样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery event flow demo</title>
</head>
<body>
<div>
<div>
<div>
<div>
<div>冒泡型事件</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" >
window.onload = function(){
var div = document.getElementsByTagName(‘div‘); //获取全部div元素
for (var i = 0; i < div.length; ++i){ //遍历div元素
div[i].onmouseover = (function(i){ //依次为每一个div元素注冊鼠标经过事件
return function(){ //以闭包形式存储动态变量i的值。以便定位div
div[i].style.borderColor = ‘red‘; //定义边框的颜色样式为红色
}
})(i); //向闭包内传递变量i的值
}
for (var i = 0; i < div.length; ++i){ //遍历div元素
div[i].onmouseout = (function(i){ //依次为每一个div元素注冊鼠标移出事件
return function(){ //以闭包形式存储动态变量i的值，以便定位div
div[i].style.borderColor = ‘white‘; //定义边框的颜色样式为白色
}
})(i); //向闭包内传递变量i的值
}
}
</script>
<style type="text/css">
div {
margin:12px 10px;
border:solid 2px blue;
}
</style>
</html>
时间： 2024-11-10 18:38:16