javascript基礎（事件的委派）（三十三）

厚積薄發2017發表於2017-02-14
JavaScript事件

1事件的委派：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#u1{
				background-color: #bfa;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				
				//點選按鈕以後，向ul中新增一個新的超連結
				//獲取按鈕物件和ul物件
				var btn01 = document.getElementById("btn01");
				var u1 = document.getElementById("u1");
				
				//為按鈕繫結單擊響應函式
				btn01.onclick = function(){
					//建立一個li
					var li = document.createElement("li");
					//設定li中的內容
					li.innerHTML = '<a class="link" href="javascript:;">新超連結</a>';
					//將li新增到ul中
					u1.appendChild(li);
				};
				
				/*
				//獲取所有的超連結
				var links = document.getElementsByTagName("a");
				//為所有的超連結都繫結一個單擊響應函式
				for(var i=0 ; i<links.length ; i++){
					
					 * 這裡我們通過for迴圈的形式來為每一個超連結都繫結了一個相同的單擊響應函式，
					 * 	這裡for迴圈每執行一次，函式就會重新建立一次，而且這些函式的功能還都是相同的。
					 * 
					 * 而且我們所繫結事件都是僅限於現在已有的元素，而新新增的元素上是沒有響應函式，
					 * 	還需要單獨繫結，這樣實在是太麻煩了
					 * 
					 
					links[i].onclick = function(){
						alert("hello");
					};
				}
				
				*/
				
				
				/*
				 * 我們希望，響應函式只繫結一次，就可以應用到所有的元素上（包括新新增的元素）
				 * 
				 * 事件委派
				 * 	- 指統一將多個元素上的事件繫結到他們共同的祖先元素上，
				 * 		這樣只需要繫結一次即可同時處理多個元素上的相同的事件，
				 * 		這樣簡化了程式碼的開發，也可以確保新新增的元素上也可以有事件響應函式
				 * 
				 */
				
				u1.onclick = function(event){
					event = event || window.event;
					
					//判斷當前觸發事件的是否是超連結
					//如果是超連結，則觸發事件，如果不是則不觸發
					//alert(this);
					//alert(event.target);
					/*
					 * 事件物件中target屬性
					 * 	事件是由誰觸發的，target就是誰
					 */
					
					if(event.target.className == "link"){
						alert("ul上的單擊響應函式");
					}
					
				};
				
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn01">點我一下</button>
		
		<ul id="u1">
			<li><a href="javascript:;" class="link">超連結一</a></li>
			<li><a href="javascript:;" class="link">超連結二</a></li>
			<li><a href="javascript:;" class="link">超連結三</a></li>
			<li><a href="javascript:;" class="link">超連結四</a></li>
		</ul>
		
		
	</body>
</html>


 

 

相關文章