zoukankan      html  css  js  c++  java
  • JS事件绑定深入

      W3C很好地解决了覆盖问题、相同函数屏蔽的问题、this传递问题、添加额外方法不被覆盖等问题。

      但是IE8之前的版本并不支持,IE9已完全支持了。

      IE和W3C在事件绑定上存在很多差异,我们以冒泡和捕获为例来介绍。

      W3C支持冒泡和捕获方式,而IE不支持捕获。

      IE有自己的事件绑定机制,通过attachEvent和deleteEvent函数来实现。

      首先,介绍IE解决覆盖问题的办法。

    window.attachEvent('onload',function(){
        alert('Lee');
    });
    
    window.attachEvent('onload',function(){
        alert('Mr.Lee');
    });
    
    window.attachEvent('onload',function(){
        alert('Miss.Lee');
    });

      输出Miss.Lee,Mr.Lee,Lee。看来,通过attachEvnet解决了覆盖问题,但输出顺序反了过了。

      其次,IE不能解决相同函数屏蔽问题,即无法屏蔽,在团队开发中相同函数要注意这个问题。

      接着,IE是否可以传递this呢?

    window.attachEvent('onload',function(){
         var box=document.getElementById('box');
         box.attachEvent('onclick',function(){
        alert(this);
        });
    });

      输出结果为object,其实为window对象,而不是box,看来IE不能传递this。

      为了解决这个问题,大家也许会想到用匿名函数call过去,但匿名函数可读性不强,不是很推荐。

      我们用事件函数来解决。若我们为box标签对象添加了事件,可以通过如下方法得到box。 

     var that =window.event.srcElement;

      最后,如何做W3C和IE事件切换器的全套兼容呢?

      详见http://edu.51cto.com/lesson/id-9553.html;

      重点:跨浏览器添加事件,移除事件,阻止事件等。

      

      

      

  • 相关阅读:
    freeswitch对媒体的处理的三种方式
    Windows如何在cmd命令行中查看、修改、删除与添加、设置环境变量
    freeswitch电话代接
    freeswitch三方通话配置
    认识拨号计划
    洛谷P4049 [JSOI2007]合金 题解
    2020-9杂题选做
    LOJ#6497. 「雅礼集训 2018 Day1」图 题解
    LOJ#6496. 「雅礼集训 2018 Day1」仙人掌 题解
    LOJ#6495. 「雅礼集训 2018 Day1」树 题解
  • 原文地址:https://www.cnblogs.com/tangzhirong/p/4827310.html
Copyright © 2011-2022 走看看