利用冒泡，给新添加的属性添加事件绑定

最新推荐文章于 2023-05-01 14:28:03 发布

原创最新推荐文章于 2023-05-01 14:28:03 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用事件委派技术来简化动态元素处理的方法。通过将事件监听器绑定到父元素上，即使子元素是动态添加的，也能响应事件。这种方法避免了为每个子元素单独绑定事件监听器的繁琐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用event中的target使冒泡到祖先中的事件仍然返回点击的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.function(){
				var btn01=document.getElementById("btn01");
				var ul=document.getElementById("ul");
				 btn01.function(){
					 var li=document.createElement("li");
					 li.innerHTML="<a href='javascript:;' class='link'>新建的超链接 </a>";
					 
					 ul.appendChild(li);
					 //alert("nihao");
					
				}
				/**
				 * 为每一个超链接都绑定一个单击响应函数
				 * 新添加的链接不能绑定
				 */
				var allA=document.getElementsByTagName("a");
				//遍历
// 				for(let i=0;i<allA.length;i++){
// 					//需要闭包才能停止
// 					//var j=i;
// 					allA[i].function(){
// 						alert("我是"+allA[i].innerHTML);
// 					} 
// 				}
				/**
				 * 希望只绑定一次就可以应用到所有的元素上了
				 * 尝试绑定到父级元素上
				 * 事件委派
				 * 指将事件统一绑定给元素的共同祖先
				 */
				ul.function(event){
					//如果触发事件的对象是我们期望的元素,则执行否则不执行.
					/**
					 * event对象中的target 点到谁就是谁
					 */
					alert(event.target.innerHTML);
				}
				

			}
		</script>
		
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		<ul id="ul">
			<!-- javascript:;可以防止链接跳转相当于return false -->
			<li><a href="javascript:;" class="link">超链接1</a></li>
			<li><a href="javascript:;" class="link">超链接2</a></li>
			<li><a href="javascript:;" class="link">超链接3</a></li>
		</ul>
	</body>
</html>