javascript 之 事件委託
優點：1、提高性能（只需要對父級進行操作，子節點同樣會擁有其相關屬性和方法）
2、對於新添加的事件，也讓其擁有父級事件的屬性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//事件委託
//讓父級委託（冒泡事件）
//優點：1、提高性能
window.οnlοad=function () {
var oUl=document.getElementById('myUl');
var aLi=document.getElementsByTagName('li');
var oInput=document.getElementById('input1');
var iNow=aLi.length;
/*
for (var i = 0; i < aLi.length; i++) {
aLi[i].οnmοuseοver=function () {
this.style.background="red";
}
aLi[i].οnmοuseοut=function () {
this.style.background="";
}
};*/
oUl.οnmοuseοver=function () {
//找到操作對象，event，對象；事件源：不管在哪個事件中的那個元素就是事件源
var event=event||window.event;
var target=event.target||event.srcElement;
//找元素的標籤名NodeName
//alert(target.nodeName)
if(target.nodeName.toLowerCase()=='li'){//只讓指定的子節點擁有某些屬性
target.style.background="red";
}
}
oUl.οnmοuseοut=function () {
//找到操作對象，event，對象；事件源：不管在哪個事件中的那個元素就是事件源
var event=event||window.event;//w3c標準和Ie標準
var target=event.target||event.srcElement;
if(target.nodeName.toLowerCase()=='li'){
target.style.background="";
}
}
/* for (var i = 0; i < aLi.length; i++) {
aLi[i].οnclick=function(){
alert("123");
}
};*/
/* oUl.οnclick=function () {
alert("123");//發生冒泡！！！委託了讓ul觸發，讓父級做委託
}
*/
//事件委託的優點2：新添加的元素，還有之前的事件的屬性
oInput.οnclick=function () {
iNow++;
var oLi=document.createElement('li');//自身沒有事件，但是其父級有，插入新節點後，其父級的事件會影響到當前事件
oLi.innerHTML=1111*iNow;
oUl.appendChild(oLi)
}
}
</script>
</head>
<body>
<input type="button" value="添加" id='input1'>
<ul id="myUl">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
