js中的事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

u013464954

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量298

点赞数

文章标签： javascript 事件委托

本文链接：https://blog.csdn.net/u013464954/article/details/52856533

版权

什么是事件委托？顾名思义，那就是本来这件事是你做的，但是你让别人去帮你做了，以达到同样的目的。

在这里用了事件冒泡的原理，给父节点添加事件，然后去查找事件源。

这样做有什么好处呢？那就是提高性能。比如我要给瀑布流的图片添加淡入淡出的效果，那我就要用到for循环给每一个图片添加事件监听，瀑布流不断加载，添加的事件越来越多，这样就很影响性能了，而且新添加的节点也不具备这样的淡入淡出特效，要重新添加，这样就特别麻烦，事件委托在这时就体现出它强大的功能了。

先来举个栗子：

我要给ul里面的li添加鼠标移入移出改变颜色，一般我们会这样做，用一个for循环添加事件。

html和css代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#list li{list-style: none;width: 200px;height: 40px;background-color: #f00;margin-bottom: 10px;}
		</style>
	</head>
	<body>
		<ul id="list">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

用for循环添加事件：

		window.οnlοad=function (){
			var oList=document.getElementById('list');
			var aLi=oList.getElementsByTagName('li');
			for (var i=0;i<aLi.length;i++) {
				aLi[i].οnmοuseοver=function (){
					this.style.backgroundColor='#0ff';
				};
				aLi[i].οnmοuseοut=function (){
					this.style.backgroundColor='#f00';
				};
			}
		};

下面用事件委托的方式：

		window.οnlοad=function (){
			var oList=document.getElementById('list');
			oList.οnmοuseοver=function (ev){
				var iEvent=ev||event;
				//事件源，IE中用window.event.srcElement，标准用target
				var src=iEvent.target||iEvent.srcElement;
				if(src.nodeName.toLowerCase()=='li'){//判断是否为li触发
					src.style.backgroundColor='#0ff';
				}
			};
			oList.οnmοuseοut=function (ev){
				var iEvent=ev||event;
				var src=iEvent.target||iEvent.srcElement;
				if(src.nodeName.toLowerCase()=='li'){
					src.style.backgroundColor='#f00';
				}
			};
		};

好了，上面的html代码我添加一个按钮，让它点击是添加li节点

<input type="button" name="btn" id="btn" value="添加" />

js中你也许会加上这些代码：

			var oBtn=document.getElementById('btn');
			oBtn.οnclick=function (){
				var addLi=document.createElement('li');
				oList.appendChild(addLi);
			}

这时候我们可以看到新添加的那些li鼠标移入移出没有变化，这是因为新添加的li没有在for循环里面，你也许会想到把for循环那一段代码用函数封装起来。如：

			function changColor(){
				var aLi=oList.getElementsByTagName('li');
				for (var i=0;i<aLi.length;i++) {
					aLi[i].οnmοuseοver=function (){
						this.style.backgroundColor='#0ff';
					};
					aLi[i].οnmοuseοut=function (){
						this.style.backgroundColor='#f00';
					};
				}
			}

但是这种方式麻烦，又影响性能。

而用事件委托的方式直接加上前面的那些代码就噢了。

u013464954

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的事件委托

什么是事件委托？顾名思义，那就是本来这件事是你做的，但是你让别人去帮你做了，以达到同样的目的。在这里用了事件冒泡的原理，给父节点添加事件，然后去查找事件源。这样做有什么好处呢？那就是提高性能。比如我要给瀑布流的图片添加淡入淡出的效果，那我就要用到for循环给每一个图片添加事件监听，瀑布流不断加载，添加的事件越来越多，这样就很影响性能了，而且新添加的节点也不具备这样的淡入淡出特效，要重新添加
复制链接

扫一扫