解除绑定事件 和 封装兼容性addEvent 来处理针对于不同浏览器的兼容方法

 <!--解除绑定事件-->
  <div style="width: 100px; height: 100px;"></div>
  <script type="text/javascript">
   var div = document.getElementsByTagName('div')[0];
   div.onclick = function (){
    console.log('a');
   }
//   解除绑定
   div.onclick = null;
  </script>

 <!--利用解除绑定事件 做点一次失效-->
  <div style="width: 100px; height: 100px;"></div>
  <script type="text/javascript">
//   选中div
   var div = document.getElementsByTagName('div')[0];
//   绑定事件 
   div.onclick = function (){
    console.log('a');
    div.onclick = null;
   }
  </script>

方二:

<div style="width: 100px; height: 100px;"></div>
  <script type="text/javascript">
   var div = document.getElementsByTagName('div')[0];
//   绑定绑定的是一个对象的特定的事件处理函数    解除也是对应的
   div.addEventListener('click',test,false);
   function test(){
    console.log('a');
   }
//   对象能找到,类型能找到   函数上哪找
   div.removeEventListener('click',test,false);
  </script>

封装兼容性        addEvent 来处理针对于不同浏览器的兼容方法
  <script type="text/javascript">
   给一个dom对象增加一个该事件类型的处理函数
   function addEvent(elem,type,handle){
    if(elem.addEventListener){
     elem.addEventListener(type,handle,false);
    }else if(elem.attachEvent){
     elem.attachEvent('on'+ type,function (){
      handle.call(elem);
     }); 
    }else{
     elem['on'+type]= handle ;
    }
   }
  </script>

猜你喜欢

转载自www.cnblogs.com/weixin2623670713/p/12654682.html