[JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误

 
电梯直达

1#

 
 php 发表于 2014/4/13 01:17 | 只看该作者 
标准浏览器中可以使用addEventListener()函数来给DOM元素绑定事件,使用removeEventListener()函数移除事件绑定,而IE6 IE7 IE8不支持addEventListener()和removeEventListener(),只能使用attachEvent()和detachEventListener()方法。IE从IE9开始支持addEventListener和removeEventListener.
addEventListener()和attachEvent()的区别主要有以下几点:

  • addEventListener(type,handler,capture)有三个参数,其中type是事件名称,如click,handler是事件处理函数,capture是否使用捕获,是一个布尔值,一般为false,这是默认值,所以第三个参数可以不写
    attachEvent('on'+type,handler)有两个参数,其中type是事件名称,如click,第一个参数必须是onxxxx,handler是事件处理函数,IE6 IE7 IE8不支持事件捕获的,只支持事件冒泡。
    关于事件冒泡:如果一个元素和它的各层上级素都设置了相同的事件,比如click事件,那么冒泡是指,当用户点击鼠标后,先触发最底层元素的click事件,然后依次逐层触发上一级元素的click事件,就像泡泡从水底冒到水面一样。
    而与事件冒泡相反,事件捕获的顺序是,从页面的根元素开始依次逐层向下级触发事件。
    IE6-8只支持事件冒泡不支持事件捕获,Google Chrome/Firefox/Safari/Opera等标准浏览器支持事件捕获和事件冒泡。
    如果只想在最底层执行事件处理函数,阻止向上级元素冒泡,也就是说如果要阻止事件冒泡,标准浏览器可以使用stopPropagation(),IE6 7 8可以使用cancelBubble=true
  • addEventListener绑定的事件是先绑定先执行,attachEvent绑定的事件是先绑定后执行
  • 在IE6 IE7 IE8浏览器中,使用了attachEvent或detachEvent后事件处事函数里面的this指向window对象,而不是事件对象元素,文末有解决方案
  • 如果一个事件在绑定以后有解除绑定的需要,可以使用removeEventListener(),参数和addEventListener一样,IE6 IE7 IE8使用detachEvent函数,参数和attachEvent一样,注意,想要移除绑定的事件,则绑定事件时不能使用匿名函数,而需要将事件处事函数单独写成一个函数。否则无法移除绑定的事件函数,因为只绑定的事件才能移除,匿名函数和匿名函数是互相不相同的,即使代码完全一样,但本质上同一匿名函数的代码写两次就是两个不同的函数。
    下面以addEventListener为例
    1. <a id="xc">点击</a>
    2. <script type="text/javascript">
    3. function handler(){
    4. alert(this.innerHTML);
    5. }
    6. var object=document.getElementById('xc');
    7. xc.addEventListener('click',handler,false);//添加事件
    8. xc.removeEventListener('click',handler,false);//移除事件
    9. /*下面这种使用匿名函数的方式添加的事件是不能移除的,因为两个匿名函数虽然代码一样,但本质上他们是两个不同的函数
    10. xc.addEventListener('click',function(){
    11. alert(this.innerHTML);
    12. },false);
    13. xc.removeEventListener('click',function(){
    14. alert(this.innerHTML);
    15. },false);
    16. */
    17. </script>

    复制代码

  • 所添加的事件必须是事件对象支持的事件,比如给window对象添加click事件就不会成功,因为window没有click事件
  • 解决IE6 IE7 IE8 attchEvent this指向window的方法:

要解决IE6 IE7 IE8 attachEvent this指向错误,有至少以下三种方法:

  • 使用事件处理函数.apply(事件对象,arguments),代码如下
        以下代码仅适用于IE6 IE7 IE8
     这种方式的缺点是绑定的事件无法取消绑定,原因上面已经说了,匿名函数和匿名函数之间是互不相等的。

    1. <a id="xc">点击</a>
    2. <script type="text/javascript">
    3. var object=document.getElementById('xc');
    4. function handler(){
    5. alert(this.innerHTML);
    6. }
    7. object.attachEvent('onclick',function(){
    8. handler.call(object,arguments);
    9. });
    10. </script>

    复制代码

  • 使用事件源代替this关键字
    以下代码仅适用于IE6 IE7 IE8,这种方式完全忽略this关键字,但写起来稍显麻烦。
    1. <a id="xc">点击</a>
    2. <script type="text/javascript">
    3. function handler(e){
    4. e=e||window.event;
    5. var _this=e.srcElement||e.target;
    6. alert(_this.innerHTML);
    7. }
    8. var object=document.getElementById('xc');
    9. object.attachEvent('onclick',handler);
    10. </script>

    复制代码

  • 自己写一个函数完全代替attachEvent/detachEvent,并且支持所有主流浏览器、解决IE6 IE7 IE8事件绑定导致的先绑定后执行问题。
    下面是完美兼容addEventListener/removeEventListener和attachEvent/detachEvent的函数,支持Google Chrome/Firefox/Safari/Opera/IE 6 7 8 9 10 11等所有主流浏览器,能够完美解决IE6 IE7 IE8 this指向错误,能够纠正IE6 IE7 IE8中事件先绑定后执行的错误。
    为了避免代码被编辑器修改,请下载附件测试。不要直接复制下面的代码。
    注意,本函数是全局函数,而不是DOM对象的成员方法。
    1. <a id="xc">点击</a>
    2. <script type="text/javascript">
    3. /*
    4. * 添加事件处理程序
    5. * @param object object 要添加事件处理程序的元素
    6. * @param string type 事件名称,如click
    7. * @param function handler 事件处理程序,可以直接以匿名函数的形式给定,或者给一个已经定义的函数名。匿名函数方式给定的事件处理程序在IE6 IE7 IE8中可以移除,在标准浏览器中无法移除。
    8. * @param boolean remove 是否是移除的事件,本参数是为简化下面的removeEvent函数而写的,对添加事件处理程序不起任何作用
    9. */
    10. function addEvent(object,type,handler,remove){
    11. if(typeof object!='object'||typeof handler!='function') return;
    12. try{
    13. object[remove?'removeEventListener':'addEventListener'](type,handler,false);
    14. }catch(e){
    15. var xc='_'+type;
    16. object[xc]=object[xc]||[];
    17. if(remove){
    18. var l=object[xc].length;
    19. for(var i=0;i<l;i++){
    20. if(object[xc][i].toString()===handler.toString()) object[xc].splice(i,1);
    21. }
    22. }else{
    23. var l=object[xc].length;
    24. var exists=false;
    25. for(var i=0;i<l;i++){
    26. if(object[xc][i].toString()===handler.toString()) exists=true;
    27. }
    28. if(!exists) object[xc].push(handler);
    29. }
    30. object['on'+type]=function(){
    31. var l=object[xc].length;
    32. for(var i=0;i<l;i++){
    33. object[xc][i].apply(object,arguments);
    34. }
    35. }
    36. }
    37. }
    38. /*
    39. * 移除事件处理程序
    40. */
    41. function removeEvent(object,type,handler){
    42. addEvent(object,type,handler,true);
    43. }
    44. </script>
    45. <script type="text/javascript">
    46. function handler(){
    47. alert(this.innerHTML);
    48. }
    49. var object=document.getElementById('xc');
    50. addEvent(object,'click',handler);
    51. //如果要测试绑定事件,请先删除下面这一行。
    52. removeEvent(object,'click',handler);
    53. </script>

    复制代码

addEventListener attachEvent和解决IE 6 7 8 this指向错误的更多相关文章

  1. 解决Unsupported major.minor version 51.0错误

    解决Unsupported major.minor version 51.0错误使用jdk6运行项目时发生了Unsupported major.minor version 51.0错误.经过网上搜索发 ...

  2. 解决wordpress上传文件出现http错误问题

    解决wordpress上传文件出现http错误问题 问题现象 今天上传约1.4m大小的gif文件到wordpress的媒体库时失败,提示http错误. 原因 由于之前一直上传图片都是可以的,所以推测最 ...

  3. 解决Maven并行编译中出现打包错误问题的思路

    解决Maven并行编译中出现打包错误问题的思路 并行构建 Maven 3.x 提供了并行编译的能力,通过执行下列命令就可以利用构建服务器的多线程/多核性能提升构建速度: mvn -T 4 clean ...

  4. 解决gremlin-dirver访问tinkerpop服务器提示序列化错误

    解决gremlin-dirver访问tinkerpop服务器提示序列化错误 问题描述 程序集成了gremlin-driver,访问远程tinkerpop服务器,在执行创建节点操作时,返回如下错误栈: ...

  5. 解决在php5中simple XML解析错误的问题

    2004年7月,php5正式版本的发布,标志着一个全新的PHP时代的到来.PHP5的最大特点是引入了面向对象的全部机制,并且保留了向下的兼容性.程序员不必再编写缺乏功能性的类,并且能够以多种方法实现类 ...

  6. js addEventListener attachEvent

    attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementB ...

  7. javascript中addEventListener(attachEvent)具体解释

    addEventListener 有三个參数:第一个參数表示事件名称(不含 on,如 "click").第二个參数表示要接收事件处理的函数:第三个參数为 useCapture.样例 ...

  8. 【先定一个小目标】怎么解决mysql不允许远程连接的错误

    最近使用Navicat for MySQl访问远程mysql数据库,出现报错,显示“1130 - Host'xxx.xxx.xxx.xxx' is not allowed to connect to ...

  9. 解决java代码测试http协议505错误

    代码功能:通过java代码获取网页源代码: 所用工具:Myclipse8.5+tomcat6.0+浏览器 系统环境:windows xp旗舰版 火狐浏览器版本: IE浏览器版本: 测试http协议有错 ...

随机推荐

  1. spring mvc获取绝对路径的几种方法

    1.首先如果是在一个controller方法中,则很简单,直接用下面语句. @RequestMapping("categoryHome") public ModelAndView ...

  2. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  3. 浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前后端解决方案

    项目中有用到文件下载功能,之前在处理下载时对IE浏览器下文件下载名进行过处理,测试也没有问题,但是功能上线后,业务反馈IE11文件下载文件名依然乱码.打印User-Agent字符串如下: IE11 U ...

  4. 怎样在Spark、Flink应用中使用Protobuf 3的包

    如果在在Spark.Flink应用中使用Protobuf 3的包,因为Spark默认使用的是2.5版本的包,提交任务时,可能会报如下异常: com.google.protobuf.CodedInput ...

  5. python每天进步一点点

    1. apply, 可以调用函数和参数,如apply(Fun,(xxx,xxx)) 2. Format, 很好处理字符串的对齐命名,其他进制,打印等. 3. input(),接受输入 4. str() ...

  6. http中的get和post(二)

    博客园精华区有篇文章< GET 和 POST 有什么区别?及为什么网上的多数答案都是错的 >,文中和回复多是对以下两个问题进行了深究: 长度限制 Url 是否隐藏数据 在我看来这两者都不是 ...

  7. 为什么epoll会那么高效

    参考(原文简直超赞):https://zhidao.baidu.com/question/687563051895364284.html下面是我结合原文写的,为了便于自己理解:关于阻塞和非阻塞的理解可 ...

  8. java中的参数传递是按引用传递还是按值传递

    最近去面试,有一个面试官问到java中参数传递的问题,感觉自己对于这一块还是理解的不够深.今天我们就一起来学习一下Java中的接口和抽象类.下面是本文的目录大纲: 一 . 什么是按值传递,什么是按引用 ...

  9. ZooKeeper如何保证单一视图

    由于ZooKeeper的数据模型简单且全部在内存中,ZooKeeper的速度非常快.它提供了一系列保证: • 顺序一致性 • 原子性 • 单一视图 • 可靠性 • 实时性 下面将结合源码(3.4.10 ...

  10. Redis分布式集群搭建

    Redis集群架构图 上图蓝色为redis集群的节点. 节点之间通过ping命令来测试连接是否正常,节点之间没有主区分,连接到任何一个节点进行操作时,都可能会转发到其他节点. 1.Redis的容错机制 ...