attachEvent与addEventlistener兼容性

关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window有关问题

By odacash   at 2014-07-01   29 阅读   0 回复   0.0 希赛币

请点击下面回答中的"采纳为答案"按钮,选择贡献(希赛币)比率后,点击"确认结算"按钮。

     
合计0人 0%  

关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window问题

  在原生事件绑定中IE绑定中需要用到attachEvent,FF与chrome中需要用到addEventListener.

  attachEvent(事件,函数)

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

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

  alert(‘a‘);

  })

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

  alert(‘b‘);

  })

  addEventListener(事件,函数,false)

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

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

  alert(‘a‘);

  },false)

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

  alert(‘b‘);

  },false)

  上面大家可以看到运用事件绑定的时候,事件的区别 一个是用onclick 一个是用到click,所以FF与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‘);

  })

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

  alert(‘b‘);

  })

  但是函数中如果出现this的话

  例如:

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

  alert(this);

  })

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

  如果要用到当前对象需要对函数进一步改造

  addEvent(oBtn,‘click‘,function(ev){

  var oEvent = ev||event;

  var that=oEvent.srcElement||oEvent.target;

  alert(that)

  })

时间: 2024-11-03 21:30:22

attachEvent与addEventlistener兼容性的相关文章

attachEvent和addEventListener

attachEvent和addEventListener在前端开发过程中经常性的使用,他们都可以用来绑定脚本事件,取代在html中写obj.onclick=method. 相同点: 它们都是DOM对象的方法,可以实现一种事件绑定多个事件处理函数. obj = document.getElementById("testdiv"); obj.onclick=function(){alert('1');}; obj.onclick=function(){alert('2');}; obj.o

attachEvent与addEventListener的区别 真实例子

近日遇到attachEvent与addEventListener两个事件,哟,果断研究一下~~ 先普及一下基本知识: attachEvent与addEventListener的作用:为某一事件附加其它的处理事件. 网上普遍都是说attachEvent用于非Mozilla系列,addEventListener用于Mozilla系列. (Mozilla系列在浏览器而言,即指火狐浏览器,本人认为也可以指支持w3c标准的系列浏览器) 理论上是这么说,还是得自己动手试一试! 结合查阅资料写了以下代码进行测

attachEvent 和 addEventListener 的用法

http://www.oschina.net/question/54100_25614 addEventListener中的第三个参数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). 点击这里 attachEvent 和 addEventListener 的用法

JS事件监听 JS:attachEvent和addEventListener 使用方法

attachEvent与addEventListener区别 适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListener方法    按钮click 两者使用的原理:可对执行的优先级不一样的事件进行操作:attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Js代码 document.getElementByI

js原生attachEvent与addEventListener的用法

现在jquery比较流行,所以我们用得比较多的是jquery,很少用原生的js. 不过还是要了解一下滴. 代码如下: <a id="btnClick" href="javascript:void(0);">点击我</a> 如果我们要给该按钮的点击按钮绑定三个函数,对js了解比较少的人容易写成这样: <script type="text/javascript"> var ele=document.getEleme

attachEvent和addEventListener区别

  一般来说,可以直接封装成这种形式: var addEvent = function(element,type,handler){ if(element.addEventListener){ //DOM2级 element.addEventListener(type,handler,false); //false为冒泡,true为捕获 }else if(element.attachEvent){ //IE element.attachEvent("on"+type,function(

js 添加事件 attachEvent 和 addEventListener 的用法

一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法 //object.attachEvent(eve

Javascript关于attachEvent和addEventListener区别与兼容写法

Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含“on”,比如“click”.“mouseover”.“keydown”等. listener :实现了 EventListener 接口或者是 JavaScript 中的函数. useCapture

attachEvent与addEventListener

看高拍仪案例的时候看到的这两个,这两个方法的作用一样都是为一个事件添加事件句柄. 语法:element.attachEvent("on" + event, function);IE7,IE8可以兼容 element.addEventListener(event, function, useCapture):除了IE7,IE8基本上都可以兼容