zoukankan      html  css  js  c++  java
  • js中事件绑定attachEvent与addEventlistener的兼容性及this指向的统一

           在原生js中用到事件绑定时,要考虑到浏览器的兼容性。IE浏览器中为attachEvent,FireFox与chrome中用法为addEventListener,并且事件绑定中的this指向也不一样,用法如下:

      attachEvent(事件,函数)

      例:var oBtn = document.getElementById('button');

      oBtn.addachEvent('onclick',function(){

        alert('a');

      })

      addEventListener(事件,函数,false)

      例:var oBtn = document.getElementById('button');

      oBtn.addEventListener('click',function(){

        alert('a');

      },false)

      上面大家可以看到运用事件绑定的时候,事件的区别 一个是用onclick 一个是用click,所以FireFox与chrome中的事件是不带on的,而IE是必须带on

      由于兼容性的问题 需要封装函数

    function addEvent(obj,ev,fn){
    
      if(obj.attachEvent){    //针对IE浏览器
    
          obj.attachEvent('on'+ev,fn)
    
      }else{    //针对FF与chrome
    
          obj.addEventListener(ev,fn,false)
    
      }
    
    }

      所以上述的实例可以改写成

      addEvent(oBtn,'click',function(){

        alert('a');

      })

      考虑到函数中如果使用this,例如:

      addEvent(oBtn,'click',function(){

        alert(this);

      })

      得到的结果是不一样的 this在IE中弹出的window,在FireFox与chrome中指代的是当前对象

      如果要统一this指向当前对象,调用函数addEvent需要统一this指向,如下:

    addEvent(oBtn,'click',function(ev){
    
      var oEvent = ev||event;
    
      var that=oEvent.srcElement||oEvent.target;
    
      alert(that)
    
    })
  • 相关阅读:
    LeetCode 面试题 02.02. 返回倒数第 k 个节点
    LeetCode 1290. 二进制链表转整数
    LeetCode 面试题52. 两个链表的第一个公共节点
    LeetCode 2. 两数相加
    Jupyter Notebook 常用快捷键 (转)
    LeetCode 414. 第三大的数
    LeetCode 404. 左叶子之和
    三年了
    LeetCode 543. 二叉树的直径
    求结点在二叉排序树中层次的算法
  • 原文地址:https://www.cnblogs.com/toggle/p/9365643.html
Copyright © 2011-2022 走看看