事件委托

最新推荐文章于 2021-05-13 14:25:10 发布

Curry 3O

最新推荐文章于 2021-05-13 14:25:10 发布

阅读量120

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/qq_42552393/article/details/96606978

版权

DOM 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件委托

因为冒泡机制，比如既然点击子元素，也会触发父元素的点击事件，那我们完全可以将子元素的事件要做的事写到父元素的事件里，也就是将子元素的事件处理程序写到父元素的事件处理程序中，这就是事件委托；利用事件委托，只指定一个事件处理程序，就可以管理某一个类型的所有事件。

通俗来说：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

实例:

首先创建一个div标签，它的里面含有四个子元素p标签，并设置相应的CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>6</title>
	<style>
		div{
			width: 100%;
			height: 102px;
			overflow: hidden;
		}
		p{
			width: 100px;
			height: 100px;
			text-align: center;
			line-height: 100px;
			background: pink;
			margin: 0 50px;
			float: left;
			border: 1px solid #000;
		}
	</style>
</head>
<body>
	<div class="one">
		<p>a</p>
		<p>b</p>
		<p>c</p>
		<p>d</p>
	</div>
</body>
</html>

效果图：
在这里插入图片描述
需求：每次点击任意一个p标签，它的背景颜色变成浅蓝色，而其他p标签的背景颜色不变。

方法一 :

首先通过forEach循环遍历拿到由所有的p标签的pps伪数组后再把它转成pps数组，然后再通过for循环遍历pps数组把所有p标签的背景颜色为粉红色(初始化)，最后设置点击的p标签的背景颜色变成浅蓝色。
具体代码如下:

<script>
	window.onload = function(){
		var pps = document.getElementsByTagName('p');
		pps = Array.prototype.slice.call(pps,0);
		pps.forEach(function(item){
			item.onclick = function(event){
				for(var i=0;i<pps.length;i++){
					pps[i].style.background = 'pink';
				}
				event.target.style.background = 'skyblue';
			}
		});
	}
</script>

方法二:

使用事件委托，用父级div标签做事件处理。当p标签被点击时，由于冒泡原理，事件就会冒泡到div标签上，因为div标签上有点击事件，所以事件就会触发。
具体代码如下:

<script>
	window.onload = function(){
		var div = document.getElementsByClassName('one')[0];
		var pps = document.getElementsByTagName('p');
		pps = Array.prototype.slice.call(pps,0);
		div.onclick = function(event){
			if (event.target.nodeName === 'P') {
				pps.forEach(function(item){
					item.style.background = 'pink';
				});
				event.target.style.background = 'skyblue';
			}
		}
	}
</script>

运行结果如下:
在这里插入图片描述

Curry 3O

关注

0
点赞
踩
0

收藏

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

事件委托       因为冒泡机制，比如既然点击子元素，也会触发父元素的点击事件，那我们完全可以将子元素的事件要做的事写到父元素的事件里，也就是将子元素的事件处理程序写到父元素的事件处理程序中，这就是事件委托；利用事件委托，只指定一个事件处理程序，就可以管理某一个类型的所有事件。   &nbsp...
复制链接

扫一扫