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

最新推荐文章于 2024-06-26 09:15:00 发布

咸鸭蛋炒饭

最新推荐文章于 2024-06-26 09:15:00 发布

阅读量304

点赞数

分类专栏： HTML5基础篇文章标签： dom html javascript

本文链接：https://blog.csdn.net/u010853130/article/details/55100915

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

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>