JavaScript事件委托

最新推荐文章于 2024-09-11 11:05:48 发布

我是刺猬姑娘

最新推荐文章于 2024-09-11 11:05:48 发布

阅读量284

点赞数

分类专栏： JavaScript 事件的委托 JS面试

本文链接：https://blog.csdn.net/hongtaochi0464/article/details/89221010

版权

JavaScript 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

JS面试

4 篇文章 0 订阅

订阅专栏

事件的委托

1 篇文章 0 订阅

订阅专栏

本篇文章参考了[link]https://www.cnblogs.com/liugang-vip/p/5616484.html

简述事件委托

1.事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
2.事件委托是指将子元素的事件监听添加到父(祖)元素中。当子元素的相应事件被触发时，事件会冒泡到父(祖)元素中去，这样事件监听就会被触发。
事件委托带来的好处有：
(1)减少与dom的交互次数，提高性能。
(2)内存占用减少，一个事件方法只需要一个内存空间。
(3)不需要从已删除的元素中解绑事件方法，也不需要给新元素绑定事件方法。

趣解事件委托

参考的文章中举了这样一个例子来讲解事件委托，即签收快递。
公司中的员工(子元素)都要去签收快递(对事件有同样的处理方法)。这时可以请前台(父祖元素)帮忙签收快递(同样的方法)。前台收到快递后会通知员工来签收。这种方式有一个最实用的好处就是：即使有新来的员工(新增的节点)，前台也会帮忙签收。——即新添加的DOM节点也是有事件的。

代码实例

首先，我们在页面上写了三个超链接，并为这三个超链接分别绑定了单击相应函数。

<body>
	<ul id="u1">
		<li><a href="javascript:;">超链接一</a></li>
		<li><a href="javascript:;">超链接二</a></li>
		<li><a href="javascript:;">超链接三</a></li>
	</ul>
<script>
	window.onload=function()
	{
		/*为每一个超链接都绑定一个单击响应函数*/
		var allA = document.getElementsByTagName("a");
		for(var i = 0; i<allA.length; i++)
		{
			allA[i].onclick = function()
			{
				alert("我是a的单击响应函数");
			}
		}
	}
</script>
</body>

为每一个事件绑定了单击响应函数
这时我们再为页面添加一个按钮，希望能够点击这个按钮就添加一个超链接。代码如下：

<body>
	<button id="btn01">添加超链接</button>
	<ul id="u1">
		<li><a href="javascript:;">超链接一</a></li>
		<li><a href="javascript:;">超链接二</a></li>
		<li><a href="javascript:;">超链接三</a></li>
	</ul>
<script>
	window.onload=function()
	{
		var u1 = document.getElementById("u1");
		var btn01 = document.getElementById("btn01");
		btn01.onclick = function()
		{
			var li = document.createElement("li");
			li.innerHTML = "<a href='javascript:;'>新增的超链接</a>";
			u1.appendChild(li);
		}

		/*为每一个超链接都绑定一个单击响应函数*/
		var allA = document.getElementsByTagName("a");
		for(var i = 0; i<allA.length; i++)
		{
			allA[i].onclick = function()
			{
				alert("我是a的单击响应函数");
			}
		}
	}
</script>
</body>

在这里插入图片描述
但问题出现了，我们点击新增的超链接。并没有为我们绑定上我们想要的单击响应函数。这个时候我们需要事件委托来帮忙啦~
我们为ul绑定单击响应事件：

		u1.onclick = function()
		{
			alert("我是ul的单击响应函数");
		}

这时就算是点击a，ul的响应函数也会被触发(冒泡)。即使是新添加的超链接，也可以触发。但是这时又出现问题了，无论是点击ul还是li还是a事件都会被触发，而我们希望只点击a时候会触发，怎么解决呢？这时需要target属性来帮忙啦~
target属性可以返回触发此事件的元素。我们为所有的a元素添加一个属性class=“link”。对触发元素进行判断：

		u1.onclick = function(event)
		{
			if(event.target.className == "link")
			{
				alert("我是ul的单击响应函数");
			}
			
		}

如果是a元素，才响应。这样就很OK啦！
完整的代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件的委托</title>
</head>
<body>
	<button id="btn01">添加超链接</button>
	<ul id="u1">
		<li><a href="javascript:;" class = "link">超链接一</a></li>
		<li><a href="javascript:;" class = "link">超链接二</a></li>
		<li><a href="javascript:;" class = "link">超链接三</a></li>
	</ul>
<script>
	window.onload=function()
	{
		var u1 = document.getElementById("u1");
		var btn01 = document.getElementById("btn01");
		btn01.onclick = function()
		{
			var li = document.createElement("li");
			li.innerHTML = "<a href='javascript:;' class = 'link'>新增的超链接</a>";
			u1.appendChild(li);
		}

		u1.onclick = function(event)
		{
			if(event.target.className == "link")
			{
				alert("我是ul的单击响应函数");
			}
			
		}

		/*为每一个超链接都绑定一个单击响应函数*/
		// var allA = document.getElementsByTagName("a");
		// for(var i = 0; i<allA.length; i++)
		// {
		// 	allA[i].onclick = function()
		// 	{
		// 		alert("我是a的单击响应函数");
		// 	}
		// }
	}
</script>
</body>
</html>