MicroHank · July 10, 2020 08:51
diff --git a/event b/event
 關於事件捕捉(下沉階段)及事件氣泡(上浮階段)，終於寫出簡單的程式碼來理解這個章節的意思。
 元素做事件綁定，事件捕捉是由根節點(document)往下搜尋至該元素節點內容，再由該節點內容上浮至根節點。
 在 Javascript Code 裡，使用 addEventListener(eventType, handler(function), boolean) 在元素上註冊事件，
 第三個參數決定事件的觸發是在捕捉階段還是氣泡階段。
 
 以下是簡單的程式範例：
 
 ---------------------[HTML]---------------------
 <html>
 	<head>
 		<style type="text/css">
 		div {
 			border: 1px solid red;
    			padding: 5px;
    			min-height: 10px;
 		}
 		</style>
 	</head>
 	<body>
 		<div class="div1">1<div class="div2">2<div class="div3">3</div></div></div>
 	</body>
 </html>
 
 在 body 內先放了三個有階層關係的 div 元素，其節點內容分別為 1, 2, 3，屬性 class 為 div1, div2, div3，我們將在 div 元素上註冊 click 點擊事件。
 捕捉階段：document -> <html> -> <body> -> <div class="div1"> -> <div class="div2"> -> <div class="div3">
 氣泡階段：<div class="div3"> -> <div class="div2"> -> <div class="div1"> -> <body> -> <html> -> document
 
 ---------------------[Javascript]---------------------
 window.onload = function() {
        // 取得元素 div
 	var div = document.getElementsByTagName("div") ;
 
        // 為各個元素註冊 click 事件，第三個參數設定 ture 代表在捕捉時觸發，預設為 false (氣泡上浮階段)
 	for (var i = 0 ; i < div.length ; i++) {
 		div[i].addEventListener("click", action, true) ;
 	} ;
 	function action() {
 		alert(this.className) ;
                // 阻止事件繼續捕捉下沉或氣泡上浮
 		// event.stopPropagation() ;
 	}
 }
 
 待所有元素 load 完成後，利用 getElementsByTagName 方法，取得所有 <div> 元素，變數 div 為 Dom 元素陣列。
 並對所有元素進行註冊點擊事件，並在捕捉階段執行，其 handler 為 action 函式，函式內 alert 出元素本身的 class 屬性值。
 
 因此，點選 div3 時，因為事件註冊為捕捉，由根節點一路向內搜尋，首先搜尋到 div1，因此 alert 順序為 div1 -> div2 -> div3。
 如果加上 event.stopPropagation()，事件會在 div1 觸發後，則停止。
 
 如果註冊為氣泡事件(上浮階段)，如 div[i].addEventListener("click", capture, false)，點選 div3 時，alert 順序為 div3 -> div2 -> div1。
 如果加上 event.stopPropagation()，事件會在 div3 觸發後，則停止。
 
 ---------------------[JQuery]---------------------
 $(document).ready(function(){
 	$("div").bind("click", function(event){
 		alert($(this).attr("class")) ;
 		event.stopPropagation() ;
 	}) ;
 }) ;
 
 值得注意的是，JQuery 註冊事件皆為在上浮(氣泡)階段，而非下沉(捕捉)階段。
 同樣地，可使用 event.stopPropagation() 來阻止氣泡上浮。
	關於事件捕捉(下沉階段)及事件氣泡(上浮階段)，終於寫出簡單的程式碼來理解這個章節的意思。
	元素做事件綁定，事件捕捉是由根節點(document)往下搜尋至該元素節點內容，再由該節點內容上浮至根節點。
	在 Javascript Code 裡，使用 addEventListener(eventType, handler(function), boolean) 在元素上註冊事件，
	第三個參數決定事件的觸發是在捕捉階段還是氣泡階段。

	以下是簡單的程式範例：

	---------------------[HTML]---------------------
	<html>
	<head>
	<style type="text/css">
	div {
	border: 1px solid red;
	padding: 5px;
	min-height: 10px;
	}
	</style>
	</head>
	<body>
	<div class="div1">1<div class="div2">2<div class="div3">3</div></div></div>
	</body>
	</html>

	在 body 內先放了三個有階層關係的 div 元素，其節點內容分別為 1, 2, 3，屬性 class 為 div1, div2, div3，我們將在 div 元素上註冊 click 點擊事件。
	捕捉階段：document -> <html> -> <body> -> <div class="div1"> -> <div class="div2"> -> <div class="div3">
	氣泡階段：<div class="div3"> -> <div class="div2"> -> <div class="div1"> -> <body> -> <html> -> document

	---------------------[Javascript]---------------------
	window.onload = function() {
	// 取得元素 div
	var div = document.getElementsByTagName("div") ;

	// 為各個元素註冊 click 事件，第三個參數設定 ture 代表在捕捉時觸發，預設為 false (氣泡上浮階段)
	for (var i = 0 ; i < div.length ; i++) {
	div[i].addEventListener("click", action, true) ;
	} ;
	function action() {
	alert(this.className) ;
	// 阻止事件繼續捕捉下沉或氣泡上浮
	// event.stopPropagation() ;
	}
	}

	待所有元素 load 完成後，利用 getElementsByTagName 方法，取得所有 <div> 元素，變數 div 為 Dom 元素陣列。
	並對所有元素進行註冊點擊事件，並在捕捉階段執行，其 handler 為 action 函式，函式內 alert 出元素本身的 class 屬性值。

	因此，點選 div3 時，因為事件註冊為捕捉，由根節點一路向內搜尋，首先搜尋到 div1，因此 alert 順序為 div1 -> div2 -> div3。
	如果加上 event.stopPropagation()，事件會在 div1 觸發後，則停止。

	如果註冊為氣泡事件(上浮階段)，如 div[i].addEventListener("click", capture, false)，點選 div3 時，alert 順序為 div3 -> div2 -> div1。
	如果加上 event.stopPropagation()，事件會在 div3 觸發後，則停止。

	---------------------[JQuery]---------------------
	$(document).ready(function(){
	$("div").bind("click", function(event){
	alert($(this).attr("class")) ;
	event.stopPropagation() ;
	}) ;
	}) ;

	值得注意的是，JQuery 註冊事件皆為在上浮(氣泡)階段，而非下沉(捕捉)階段。
	同樣地，可使用 event.stopPropagation() 來阻止氣泡上浮。