JavaScript事件的解绑方式

`有些时候,我们需要给一个DOM对象绑定一个事件,但是使用完时,我们又需要对这个DOM对象解除绑定的事件,下面针对这种情况来讲解一下解绑事件

<div id= "box">100</div>

比如我这里有一个div,现在我需要给div绑定一个点击事件,让它只触发一次,然后就解除这个点击事件
当然了我们先获取到这个DOM对象,然后绑定点击事件,使点击后弹出一个0;

var box = document.querySelector('#box');
		box.addEventListener('click',function(){
		alert(0)
})

现在解绑事件
方式1

var box = document.querySelector('#box');
		box.addEventListener('click',function(){
		alert(0)
	var  target = arguments.callee;
	div.removeEventListener('click',target)
})

这里的arguments.callee返回的是当前函数本身,
注意:由于ES5严格模式诞生,arguments.callee被禁用掉了
所以这种方式已经被摒弃了,虽然可以对事件进行解绑

在这,根据上面的思路,
可以想一下,要解绑事件,是不是就得拿道当前绑定事件的那个回调函数,这样一来,我们就有思路了.只要拿到这个函数,就可以对当前的DOM事件进行解绑事件

所以我们可以这样
方式2.

var box = document.querySelector('#box');
		box.addEventListener('click',function fn(){
		alert(0)
	div.removeEventListener('click',fn)
})

这里给匿名函数变成一个有名字的函数,这样通过名字就能获取到这个函数,最后就可以进行解绑了,

这样有个注意点,可能有人会说直接把函数复制过来不就好了吗,就像这样??

var box = document.querySelector('#box');
		box.addEventListener('click',function (){
		alert(0)
	div.removeEventListener('click',function(){
	alert(0)
})

其实不然,你复制过来,虽然函数里面的东西是一样的,但是,它是不一样的,我们可以验证一下,

function(){}==function(){}  //false

可以看到两个匿名函数是不一样的,因为他们指向的是不同的内存地址;就像两个空对象{ } == { },答案也是false;
所以那样做是不行的

解绑事件就用方式2;