javascript 之 事件托付
长处：1、提高性能（仅仅须要对父级进行操作，子节点相同会拥有其相关属性和方法）
2、对于新加入的事件。也让其拥有父级事件的属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//事件托付
//让父级托付（冒泡事件）
//长处：1、提高性能
window.onload=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].onmouseover=function () {
this.style.background="red";
}
aLi[i].onmouseout=function () {
this.style.background="";
}
};*/
oUl.onmouseover=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.onmouseout=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].onclick=function(){
alert("123");
}
};*/
/* oUl.onclick=function () {
alert("123");//发生冒泡。！！托付了让ul触发。让父级做托付
}
*/
//事件托付的长处2：新加入的元素，还有之前的事件的属性
oInput.onclick=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>
