javascript --- 事件委托

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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值