今天来说说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绑定了点击事件之后生成的雷块,是响应不到点击事件的,除非你又重新绑定一次点击事件,这样会出现不必要的麻烦
用事件委托的话 就是一个一劳永逸的办法,之后生成的雷块照样会响应点击事件。
如果不用事件委托的话 当我们的雷块有成百上千个后,代码的执行效率就被慢慢的拉下去了。
好了今天就扯到这了。。睡觉 。。