JS删除事件（解绑事件）及兼容性解决方案

1.传统注册方式

   eventTarget.onclick = null; 

2. 方法监听注册方式

  1. eventTarget.removeEventListener(type, listener[, useCapture]); ***
  2. eventTarget.detachEvent(eventNameWithOn, callback);

3. 案例：

   <div>1</div>
       <div>2</div>
       <div>3</div>
       <script>
           var divs = document.querySelectorAll('div');
           divs[0].onclick = function() {
               alert(11);
               // 1. 传统方式删除事件
               divs[0].onclick = null;
           }
           // 2. removeEventListener 删除事件
           divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
           function fn() {
               alert(22);
               // 点击div1的时候弹出22，然后直接移除点击事件。
               // 移除事件需要参数1，哪种事件，参数2，这种事件中的fn处理程序
               // 为啥需要指定处理程序fn？因为这个点击事件可以有多个处理程序，你要指定删除哪个
               divs[1].removeEventListener('click', fn);
               // divs[1].addEventListener('click', fn()) // 里面的fn 不需要调用加小括号
               // 如果添加了小括号，就相当于将fn()调用完成的返回值作为第二个参数传递了
               // 事件处理程序，不是我们调用的，而是js引擎调用的。
               // 我们通过第二个参数，告诉js引擎，事件发生时要调用的方法是谁，所以只告诉他方面即可
           }
           // 3. detachEvent
           divs[2].attachEvent('onclick', fn1);

           function fn1() {
               alert(33);
               divs[2].detachEvent('onclick', fn1);
           }
       </script>

注意：

4. 删除事件兼容性解决方案

   function removeEventListener(element, eventName, fn) {
         // 判断当前浏览器是否支持 removeEventListener 方法
         if (element.removeEventListener) {
           element.removeEventListener(eventName, fn);  // 第三个参数 默认是false
         } else if (element.detachEvent) {
           element.detachEvent('on' + eventName, fn);
         } else {
           element['on' + eventName] = null;
    }