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>