js中的事件委托

最新推荐文章于 2025-06-09 08:14:13 发布

原创最新推荐文章于 2025-06-09 08:14:13 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #扫雷 #事件委托

js 专栏收录该内容

4 篇文章

订阅专栏

本文通过制作扫雷游戏的过程，详细介绍了事件委托的概念及其在提高代码执行效率方面的作用。作者最初面临为大量雷区小块绑定点击事件的难题，通过事件委托实现了仅需在雷区绑定事件，利用事件对象的target属性判断点击目标，从而简化代码并提升性能。

今天来说说js中的事件委托，我为啥会接触到事件委托这个东西呢？它到底是个啥？

这个故事还得从两年前我还在上学那会儿说起，那个时候刚开始学js，谋划着想用js来做一个扫雷，但是到了给一个个用来代表雷区的小块来做点击事件的时候犯难了，因为根据选择难度的不同，雷区的区域大小不同，里面的小块数量也不同，点击每一个小块，都要把他翻开，给每一个小块都去绑定一个点击事件，这也不是个事，当时做出来的样子是这样的

苦苦找寻了许久，终于听到了一个名词事件委托，然而具体是如何实现的呢

在这里我们需要想到一件事，那就是当我们点击了雷区中的小块，我们不也点击了雷区嘛。所以，我们不用去给每个小块绑定点击事件，而是把点击事件绑定到雷区上面，然后在点击事件里面，我们再去判断，他点了谁，这个可以用事件对象中的target属性来判断。具体的实现是这样的。

//为雷区绑定点击事件并传入时间对象
document.getElementById("BoomArea").addEventListener('click',function(e){ 
	 //兼容事件对象
	 var e=e || window.event
	 //判断是否点击了雷块  雷块 class = boom
	 if(e.target.className == 'boom'){
	 	//如果点击了雷块 我们就去获取他的id      id生成规则   'boom'+序号
	 	var boom=document.getElementById(e.target.id);
	 	//这样我们就可以来做翻开这个小块的操作了 
	 }
});

至此，关于扫雷的时候点击雷块的问题就解决了，至于扫雷小游戏的其他细节，以后再慢慢说

用事件委托和jquery的class选择器绑事件来对比一下

上面的操作我们用jquery来给class是boom的类来绑定点击事件，是不靠谱的，在jquery绑定了点击事件之后生成的雷块，是响应不到点击事件的，除非你又重新绑定一次点击事件，这样会出现不必要的麻烦

用事件委托的话就是一个一劳永逸的办法，之后生成的雷块照样会响应点击事件。

如果不用事件委托的话当我们的雷块有成百上千个后，代码的执行效率就被慢慢的拉下去了。

好了今天就扯到这了。。睡觉。。