之前给li写事件的时候发现，用代码新添加的li不能像之前的事件。如同下图！
后来改变看到有事件委托就可以修复这个bug!就试了试！
以下是全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li{
border: 1px solid red;
}
</style>
<script type="text/javascript">
window.οnlοad=function () {
var oUl = document.getElementById('ul')
var aLi = document.getElementsByTagName('li');
var obtn = document.getElementById('btn');
var num = parseInt(aLi.length);
obtn.οnclick=function(){
num++;
var addLi = document.createElement('li');
addLi.innerHTML = num;
oUl.appendChild(addLi);
}
//for(var i=0;i<aLi.length;i++){
//普通写法
// aLi[i].onmouseover = function(){
// this.style.background ='red';
// }
// aLi[i].onmouseout = function(){
// this.style.background ='';
// }
//}
//委托
oUl.onmouseover = function(ev){
//为了兼容IE
var oEvent = ev||window.event;
var target = oEvent.target|| oEvent.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red';
}
}
oUl.onmouseout = function(ev){
var oEvent = ev||window.event;
var target = oEvent.target|| oEvent.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '';
}
}
}
</script>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<button id="btn" >创建</button>
</body>
</html>在这里委托的优点很明显，没了循环。提高了性能。而且，用普通写法的话，添加li标签之前，for循环就执行完了！