注册事件和删除事件的方法

注册事件

• 传统注册方式：

  //利用on开头的事件
  <button onclick="alert('xxx')"></button>
  btn.onclick=function() {}
  

  注意：传统方法注册事件具有唯一性，后注册事件覆盖先注册事件

•  事件监听方式：(最常用）

目标对象.addEventListener(加引号不带on的事件类型字符串,事件处理函数名,[useCapture])

注意：

• 符合w3c标准
• 可以添加多个事件处理函数
• 只使用在IE9及之后的浏览器，IE9之前可以用attachEvent

•  注册事件兼容性解决方案：

  //fn传入想要添加的函数
  function addEventListener(element,eventName,fn) {
      //判断是否支持addEventListener方法
      if (element.addEventListener) {
          element.addEventListener(eventName,fn); //第三个参数默认为false
      } else if (element.attachEvent) {
          element.attachEvent('on'+eventName,fn);
      } else {
          //相当于element.onclick=fn;
          element['on'+eventName]=fn;
      }
  }

删除事件 

• 传统注册方式：

目标对象.'on'+事件名=null;

•  事件监听方式：

目标对象.removeEventListener(加引号不带on的事件类型字符串,要移除的函数名);

注意：若IE9以前，用目标对象.detachEvent(加引号带on的事件类型字符串,要移除的函数名)

• 兼容性方式 

  ​//fn传入想要删除的函数
  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.onclick=null;
          element['on'+eventName]=null;
      }
  }
  
  ​