javascript - 事件委托
日期：2014-05-16 浏览次数：20418 次
javascript --- 事件委托
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
