事件代理

最新推荐文章于 2022-03-22 12:19:37 发布

liying123466

最新推荐文章于 2022-03-22 12:19:37 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/liying123466/article/details/78185315

版权

所谓的事件代理就是将本身所要执行的事件放在别的东西的身上，达到所要实现的效果

（1）第一种形式：利用事件源

a.没有利用事件代理之前利用的是for循环形况下的代码

<!DOCTYPE html>
<html>
<head>
	<title>事件代理</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		window.onload=function(){
			var oll=document.getElementsByTagName('ul')[0];
			var lli=oll.getElementsByTagName('li');
			for (var i = lli.length - 1; i >= 0; i--) {
				lli[i].onmouseover=function(){
					this.style.backgroundColor="red";
				}
				lli[i].onmouseout=function(){
					this.style.backgroundColor="";
				}
			}
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</body>
</html>

b.利用事件代理的时候的代码(利用的就是事件源)

事件源：执行的对象是谁，事件源就是谁(下面的代码存在的问题就是不能区分li和ul，在文章的后面说到nodeName的时候就将这个问题进行解决了)

明显就可以看出来如果利用事件代理可以提高性能，这里可能表现得不是很明显，如果<li>元素很多的情况下，相信你就可以感受到了

补充：获得事件源的标签的名字利用的是：nodeName

其中将转换为小写：toLowerCase

因此就可以利用其中的标签名字来进行判断防止出现的其中的的对象发生在ul上，因此对于利用事件源进行的事件委托的代码修改为：

<!DOCTYPE html>
<html>
<head>
	<title>事件代理</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		window.onload=function(){
			var oll=document.getElementsByTagName('ul')[0];
			var lli=oll.getElementsByTagName('li');
			oll.onmouseover=function(ev){
				var ev= ev || window.event;
				var target = ev.srcElement || ev.target;
				if(target.nodeName.toLowerCase()=='li'){
					target.style.background="red";
				  }
			}
			oll.onmouseout=function(ev){
				var ev= ev || window.event;
				var target = ev.srcElement || ev.target;
				if(target.nodeName.toLowerCase()=='li'){
					target.style.background="white";
				  }
			}
		};

	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</body>
</html>

*****需要注意的就是背景颜色如果想要转换为白色，在谷歌里面不能写成:xxx.style.background=" ";这样是不起作用的

(2)利用的是事件冒泡进行事件代理

假如点击每一个li的时候都让弹出来123

a.不利用事件代理

<!DOCTYPE html>
<html>
<head>
	<title>事件代理</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		window.onload=function(){
			var oll=document.getElementsByTagName('ul')[0];
		    var lli=oll.getElementsByTagName('li');
		    for (var i = lli.length - 1; i >= 0; i--) {
		    	lli[i].onclick=function(){
		    		alert(123);
		    	}
		    }
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</body>
</html>

b。利用事件代理，利用冒泡将事件绑在它的父级元素或者是父父级的元素上

<!DOCTYPE html>
<html>
<head>
	<title>事件代理</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		window.onload=function(){
		    var oll=document.getElementsByTagName('ul')[0];
		    var lli=oll.getElementsByTagName('li');
		    oll.onclick=function(){
		    	alert(123);
		    }
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</body>
</html>

liying123466

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
事件代理

所谓的事件代理就是将本身所要执行的事件放在别的东西的身上，达到所要实现的效果（1）第一种形式：利用事件源a.没有利用事件代理之前利用的是for循环形况下的代码<!DOCTYPE html><html><head> <title>事件代理</title> <meta charset="utf-8">...
复制链接

扫一扫