attachEvent与addEventlistener兼容性

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

By odacash at 2014-07-01 29 阅读 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)

　　})

本问题标题：关于原生事件绑定中attachEvent与addEventlistener中兼容性以及attachEvent函数中this指代window有关问题
本问题地址：http://www.educity.cn/wenda/146927.html

转载于:https://www.cnblogs.com/leo388/p/4464147.html

attachEvent与addEventlistener兼容性相关推荐

addEventLinstener与attachEvent区别、兼容性问题
addEventLinstener与attachEvent区别.兼容性问题我们知道,绑定事件的方法一般是这样的: //对象.事件 = 处理函数 //例如: <input type=" ...
attachEvent 与addEventListener到底有什么区别呢？
2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题
原生js的attachEvent和addEventListener解决window.onload在一个页面只能执行一次的问题参考文章: (1)原生js的attachEvent和addEventLis ...
JS:attachEvent和addEventListener方法
<SCRIPT LANGUAGE="JavaScript"> <!-- /**************************************** ...
attachEvent 与 addEventListener的使用
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意 attachEvent方法按钮onclick addEventListener方法按钮 ...
js 添加事件 attachEvent 和 addEventListener 的用法
一般我们在JS中添加事件,是这样子的 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.οnclick=method1; obj. ...
js 添加事件 attachEvent 和 addEventListener 的区别
1.addEventListener 适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->met ...
js添加事件 attachEvent 和addEventListener的用法
一般我们在JS中添加事件,是这样子的: obj.onclick = method 这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢??? obj.onclick = meth ...
js 添加事件 attachEvent 和addEventListener 的用法
2019独角兽企业重金招聘Python工程师标准>>> 一般我们在JS中添加事件,是这样子的 1 obj.οnclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个 ...
addEvent完美封装（addEventListener兼容性封装）
addEventListener兼容各大浏览器封装封装:addEvent.js /** * element 要绑定事件的对象,及HTML节点. * type 事件名称,attachEvent监听的事 ...

attachEvent与addEventlistener兼容性

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

attachEvent与addEventlistener兼容性相关推荐

最新文章

热门文章