js中的事件委托

今天来说说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绑定了点击事件之后生成的雷块,是响应不到点击事件的,除非你又重新绑定一次点击事件,这样会出现不必要的麻烦

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

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

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

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值