事件委托

最新推荐文章于 2024-09-30 03:35:25 发布

向前看傻帽儿

最新推荐文章于 2024-09-30 03:35:25 发布

阅读量157

点赞数

分类专栏： js进阶知识点文章标签： web前端

本文链接：https://blog.csdn.net/qq_41557320/article/details/88989743

版权

js进阶知识点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件委托
所谓事件委托就是利用事件冒泡，指定事件的某一处理程序就可以管理某一类型的所有事件
有一个经典的例子来解释事件委托原理：
有三个同事预计在同一天会收到快递，有两种取快递的办法，一种是三个同事同时下楼在门口等快递，另一种是委托给前台人员，帮忙代领快递，自己来取的时候只需要报自己的姓名既可，即使公司来了新同事，前台人员也会对快递进行核实然后帮其代领。
这段例子中包含两层含义：
第一：委托给前台人员的快递是可以代收的，即dom节点是有事件的
第二：新同事的快递也可以被前台人员代收，即新添加的dom节点也是有事件的

使用事件委托的目的
如果我们有100个li，每个li都有点击事件，用for循环给每个li添加事件会影响页面的整个性能，这是因为需要不断的dom节点进行交互，当节点的访问次数增加时，引起浏览器的重绘和重排的次数增加，就会延长浏览器的就绪和交互时间

事件委托的原理
事件委托是由事件冒泡实现的，就是从底层节点开始，逐级向上传播。例如在一个无序列表ul中嵌套多个li，并且每个li都有个超链接，点击li，事件的执行顺序为a>li>ul，事件都会冒泡到最外层ul，给最外层设置事件，即委托给父级代其执行事件

事件委托案例：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title></title>
</head>
<body>
<ul id="ulo">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<script type="text/javascript">
	//普通写法
	var ulold = document.getElementById('ulo');
	var list = ulold.childNodes;
	for(var i=0;i<list.length;i++){
		if(list[i].nodeName.toLowerCase()==='li'){
			list[i].onclick = function () {
				console.log(this.innerText);
			};
		}
	}

	//事件委托的写法
	var ulnew = document.getElementById('ulo');
	ulnew.onclick = function (event) {
		var event = event||window.event;
		target = event.target || event.srcElement;
		if(target.nodeName.toLowerCase()==='li'){
			console.log(target.innerText);
		}
	};
</script>
</body>
</html>

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较