之前給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循環就執行完了！