事件委托小效果
事件委托
<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>
