zoukankan      html  css  js  c++  java
  • 事件委托小效果

    事件委托

    	<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>
    

      

  • 相关阅读:
    8-JS闭包、回调实例
    7-闭包、回调
    6-JS函数(二)
    5-JS函数
    4-JS对象
    3-WebPack
    2-Babel
    1-NPM
    25-React事件处理及条件渲染
    java初始化笔记
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11910640.html
Copyright © 2011-2022 走看看