码迷,mamicode.com
首页 > 其他好文 > 详细

事件委托小效果

时间:2019-11-22 12:02:59      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:event   class   cti   append   put   func   ack   elements   innerhtml   

事件委托

	<body>
		<input type="button" value="创建新的" id="btn"/>
		<ul class="box">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<p>嘿嘿</p>
		</ul>
	</body>
</html>
<script>
	var box = document.getElementsByClassName("box")[0];
	var btn = document.getElementById("btn");
	btn.onclick = function(e){
		var oLi = document.createElement("li");
		oLi.innerHTML = "新兄弟";
		box.appendChild(oLi);
	}
	box.onclick = function(e){
		var e = e || event ;
		var target = e.target || e.srcElement ;
		if(target.tagName == "LI"){
			target.style.fontSize = "40px";
			target.style.background = "red"
		}
	}
</script>

  

事件委托小效果

标签:event   class   cti   append   put   func   ack   elements   innerhtml   

原文地址:https://www.cnblogs.com/xiaoyaolang/p/11910640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!