Js为什么解除不掉事件绑定？

我们先来谈一下注册事件的方式：

1、传统注册事件

即利用各种on开头的事件，例如onclick、onmousedown、onmouseover、onmousemove、onmouseup等等诸如此类的事件，我们都会用以下代码块来对某些dom元素进行注册事件：

btns[0].onclick = function() {
      console.log(1);
}
btns[0].onmousedown= function() {
      console.log(1);
}
btns[0].onmouseup= function() {
      console.log(1);
}
btns[0].onmouseover= function() {
      console.log(1);
}

这一类事件设置具有唯一性：例如，一个dom元素只能通过这种方式绑定一个onclick事件，当我想在以后再添加一些操作时，只会执行最后添加的那个onclick事件的回调函数。
例如下面代码：

btns[0].onclick = function() {
     console.log(1);
}
btns[0].onclick = function() {
     console.log(2);
}

执行结果如下：

可以看出第一次的onclick事件被第二次的覆盖掉了，所以咋控制台只打印出了第二个点击事件的2。

2、方法监听事件

此方法依靠addEventListener()；是一个方法。但与传统注册事件不同的是：同一个元素同一个事件可以装载多个监听器，并且会按照注册的顺序依次执行。

例如下面代码：

btns[0].addEventListener('click',function() {
          console.log(1);
})
btns[0].addEventListener('click',function() {
          console.log(2);
})

执行结果为：

可以看到，第一次和第二次点击事件的回调函数全部都执行了，控制台按照注册事件的顺序依次执行了回调函数的内容。

说完了注册函数的方法和异同，下面就来说一下怎么样才能够清除函数吧！

3、解除传统注册事件的绑定

使用这种格式的函数既可以解除事件的绑定：evenTarget.onclick. = null;
evenTarget表示你所要解绑的dom元素，而后面的onclick则是代表你所要解绑的事件类型，例如onclick、onmousedown等等，最后只需让他们等于null即可实现解除绑定的功能。

btns[0].onclick = function() {
	 console.log(1);
 	 btns[0].onclick = null;//解除绑定事件
}

这样我多次点击按钮想要在控制台输出1的时候，最多就只能输出一个1。因为第一次点击完按钮后，该按钮的点击事件就被清除了。

4、方法监听事件解除绑定的方法：

此时要依靠这种方式来解除事件：evenTarget.removeEventListener()
与消除传统注册事件的不同点就在于如果你想消除一个事件，那么你就必须要实现创造一个函数，注册的事件和要消除哪个事件是通过这个函数来进行辨认的。

function fn() {
       console.log(1);
       btns[0].removeEventListener('click',fn)
}
       btns[0].addEventListener('click',fn)

这和上面得到的结果是一样的，结果如下图所示：

对解除事件绑定更深层次的研究：

btns[0].onclick = function() {
          console.log(1);
		  btns[1].onclick = function() {
		      console.log(2);
		  }
}
btns[2].onclick = function() {
	      btns[0].onclick = null;
	      btns[1].onclick = null;
}

相信这个代码大家并不难看懂，大致意思为点击第一个按钮后再控制台输出1，点击第二个按钮在控制台输出2，点击第三个按钮之后则解除前面两个点击事件的绑定。
结果如下图所示：

点击第三个按钮后，再点击第一个和第二个按钮控制台将不会在有输出。
那如果换一种清除事件的方式会怎么样呢？

   function fn1() {
        console.log(1);
        btns[1].addEventListener('click',fn2)
}
    function fn2() {
        console.log(2);
}
      btns[0].addEventListener('click',fn1)
	btns[2].addEventListener('click',function() {
	    btns[0].removeEventListener('click',fn1)
	    btns[1].removeEventListener('click',fn2)
	})

可以看到这种方式比上一种方式要麻烦很多，因为每个事件都需要对应一个函数，等要清除的事件多了，可能就会有点眼花缭乱，并且这里有个很容易犯的错误，就是大多数新手可能会认为只要清除了作用域比较大的那个事件就可以了，其实不然，因为小作用域的事件可能早被添加到了异步执行队列中去，在后续的检查中，很容易会让人产生解除事件绑定失败的错觉，所以这里还是建议在面对清除多个事件的时候还是选择第传统注册事件的方法。