jQuery事件傳播，事件流

時間 2019-11-18

標籤 jquery 事件傳播欄目 JQuery 简体版

原文原文鏈接

一. jQuery事件傳播javascript

在DOM2級事件模型中，一旦事件被觸發。事件流首先從DOM樹頂部（文檔節點）向下傳播。直到目標節點。而後再從目標節點向上傳播到DOM樹頂。從上到下的過程被稱爲捕獲階段。從下到上的過程被稱爲冒泡階段。css

利用循環體結構分別爲button元素及其所有父級節點註冊一個捕獲型鼠標單擊類事件處理函數。html

代碼演示樣例：java

<!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，即註冊事件爲冒泡型處理程序。node

<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事件流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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。