首页 > 代码库 > jQuery事件传播,事件流

jQuery事件传播,事件流

一. 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="http://www.mamicode.com/Event对象">
	<p>捕获型事件流传播过程:</p>
</body>
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/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>






jQuery事件传播,事件流