javascript --- 事件委托

最新推荐文章于 2014-10-16 15:37:04 发布

zz410675629

最新推荐文章于 2014-10-16 15:37:04 发布

阅读量844

点赞数

分类专栏： javascript基础学习

本文链接：https://blog.csdn.net/zz410675629/article/details/24113973

版权

javascript基础学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>