事件委派 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button class="btn">按钮</button>
		
		<ul class="ul">
			<b>3333333333</b>
			<h1>33333333333333</h1>
			<li>111111111111111111</li>
			<li>111111111111111111</li>
			<li>111111111111111111</li>
			<li>111111111111111111</li>
		</ul>
		
		<script>
			//事件的委派 自己的理解
			//给标签绑定事件，新加同样的标签，新加的标签也有这个事件，正常的要写两次事件
			//通过找到该类 标签的父标签 找到此标签  一次 绑定事件， 新加的子标签和原有的字标签都有该事件
			var btn=document.querySelector(".btn")
			var ul=document.querySelector(".ul");
			ul.onclick=function(e){
				if(e.target.nodeName==="LI"){
					alert(0)
				}
			}
			
			btn.onclick=function(){
				var li=document.createElement("li");
				var strc=document.createTextNode("ttt哈哈哈哈哈哈");
				li.appendChild(strc);
				ul.appendChild(li)
			}
			
		</script>
	</body>
</html>

　　

posted @ 2019-10-31 11:22  福超  阅读(134)  评论(0)    收藏  举报