js中的事件委托

最新推荐文章于 2025-05-05 00:30:00 发布

原创最新推荐文章于 2025-05-05 00:30:00 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #事件委托 #冒泡

Web前端基础专栏收录该内容

5 篇文章

订阅专栏

起因：
这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；

概述：

什么叫事件委托呢，事件委托还有一个名字叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

举个列子

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

事件委托的优点

1、事件委托会减少对节点的访问次数，提高运行性能

2、每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈）

事件委托的实现

1、一般的实现

<body>
	<ul id="ul1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>4</li>
	</ul>
</body>
<script>
var li = document.getElementsByTagName("li");
for(var i = 0; i<li.length;i++){
	li[i].onclick = function(){
		alert(1)
	}
}
</script>

2、利用事件委托

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

window.onload = function(){
            　　var oUl = document.getElementById("ul1");
            　　oUl.onclick = function(ev){
                　　　　var ev = ev || window.event;
                　　　　var target = ev.target || ev.srcElement;    //获取当前点击的元素
                　　　　if(target.nodeName.toLowerCase() == 'li'){   
                　 　　　　　　    alert(123);
        　　　　　　　  alert(target.innerHTML);
                　　　　}
            　　}
        }

总结：

适合用事件委托的事件 click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。