zoukankan      html  css  js  c++  java
  • javaScript事件机制兼容【整理】

    【添加事件机制】  addEventListener  和  attachEvent 

    [W3C]

    addEventListener('click' , function(){alert('Hello World')} ,false )  //W3C规范添加事件(IE8及以上不兼容);  第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获

    [IE]

    attachEvent('onclick',function(){alert('Hello World')})  //IE添加事件;  第一个参数为事件类型(需要加on) ; 第二个为事件程序 ; 因为IE只支持事件冒泡,所以只有两个参数

    [跨浏览器兼容]

    function insertEvent(obj,Event,fun){

      if(obj.addEvenListener){

        addEventLitener(Event,fun,false)

      }else if(obj.attach){

        attachEvent('on'+Event,fun)

      }  

    }

    ------------------------------------------------------------------------------------------

    【删除事件机制】 removeEventListener  detachEvent

    [W3C] removeEventListener

    removeEventListener()    //利用addEventListener新增的事件只能通过removeEventListener来删除;

    [注意] //以下这种删除事件方式是错误的,因为事件程序必须不能是一个匿名函数

    addEventListener('click' , function(){alert('Hello World')} ,false )

    removeEventListener('click',function(){alert('Hello World')},false)  

     [解决]

    addEventListener('click' , box ,false );

    removeEventListener('click',box,false) ;

    function box(){

      alert('Hello World');

    }

    [跨浏览器兼容]

    function deleteEvent(obj,Event,fun){

      if(obj.removeEventListener){

        removeEventListener(Event,fun,false);

      }else if(obj.detachEvent){

        detachEvent('on'+Event,fun)

       }

    }

     -------------------------------------------------------------------------------------------------

     【阻止特定事件的默认行为】

    [preventDefault  和returnValue]

    [W3C] preventDefault

    [IE]  reutrnValue

    [跨浏览器兼容]

    function(event){

      event=event || window.event;

      if(event.preventDefault){

        event.preventDefault()

      }else{

       event.returnValue=false;

      }

    }  

    ---------------------------------------------------------------------------------------------------

    【获取目标对象】

    [target 和 srcElement]

    function(event){

      event=event || window.event;

      if(event.target){

        return event.target;

      }else if(event.srcElement){

        return event.srcElement;

      }

      }

  • 相关阅读:
    代理模式
    工厂模式
    Mysql索引数据结构为什么是B+树?
    mxgraph中mxStencil使用经验
    !dbobji.cpp@8615
    ForkJoinPool线程池
    保障线程安全的设计技术
    Java利用线程工厂监控线程池
    使用Arthas分析线上问题
    使用规则执行器代替 if else 判断
  • 原文地址:https://www.cnblogs.com/Mesiky/p/5696012.html
Copyright © 2011-2022 走看看