注册事件

注册事件有两种方式:传统方式 和 方法监听注册方式

1. 传统注册方式:btn.onclick = function (){}

 利用 on 开头的事件 onclick

 特点:注册事件的唯一性

 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

2.方法监听注册方式:addEventListener()  w3c 标准 推荐方式

    IE9之前的 IE不支持此方法,可使用 attachEvent() 代替

 特点:同一个元素同一个事件可以注册多个监听器,按注册顺序依次执行

 eventTarget.addEventListener( type,listener[,useCapture ])

  type:事件类型,比如click,mouseover(这里的事件类型不带 on )

  listener:事件处理函数,事件发生时,会调用该监听函数

  useCapture:可选参数,是一个布尔值,默认是false

 案例 :btn.addEventListener('click', function(){

       alert(123);

     })

3.attachEvent 事件监听方式  只支持ie9以前版本  不标准  不推荐

 eventTarget.atachEvent( eventNameWithOn ,callback );

 eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要带on

 callback:事件处理函数,当目标触发事件回调函数被调用

 btn.attachEvent('onclick',function(){

   alert(1234);

 })

4.注册事件兼容性解决方式:(封装函数)

 function addEventListener(element,eventName,fn){

   //判断当前浏览器是否支持 addEventListener 方法

   if(element.addEventListener){

     element.addEventListener(eventName,fn);

   }else if(element.attachEvent){

     element.attachEvent('on'+eventName,fn);

   }else{

     element[ 'on'+eventName ] = fn;  // 相当于 element.onclick = fn;

   }

 }

 兼容性处理的原则:首先照顾大多数浏览器,再处理特殊浏览器

 5.删除事件的方式

  5.1 删除传统注册方式

    eventTarget.onclick = null;

    btn.onclick = null ;

  5.2 方法监听注册方式

  ①  eventTarget.removeEventListener(type,listener[,useCapture] );

    btn.addEventListener('click',fn);

    function fn(){

      alert(2);

      btn.removeEventListener('click' ,fn);

    }

  ②  eventTarget.detachEvent( eventNameWithOn,callback);

    btn.attachEvent('onclick' ,fn1);

    function fn1(){

      alert(234);

      btn.detachEvent('onclick',fn1);

    }

 6.删除事件兼容性解决方案(封装函数)

 function  removeEventListener(element,eventName,fn){

   //判断当前浏览器是否支持 removeEventListener 方法

   if(element.removeEventListener){

     element.removeEventListener( eventName , fn );

   }else if(element.detachEvent){

      element.detachEvent( 'on' + eventName , fn );

   }else{

      element[ 'on' + eventName ] = null;

   }

 }

原文地址:https://www.cnblogs.com/qtbb/p/11679932.html