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;