• js添加事件 attachEvent 和addEventListener的用法


    一般我们在JS中添加事件,是这样子的:

    obj.onclick = method
    

      这种绑定事件的方式,兼容主流浏览器,但是如果一个元素上添加多次同一个事件呢???

    obj.onclick = method1;
    obj.onclick = method2;
    obj.onclick = method3;
    

      如果这样写,那么只有绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角该登场了,在IE中我们可以使用attachEvent方法

    btn1Obj.attachEvent("onclick",method1);
    btn1Obj.attachEvent("onclick",method2);
    btn1Obj.attachEvent("onclick",method3);
    

      使用格式前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是method3 --> method2 --> method1

    可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

    btn1Obj.addEventListener('click',method1,false);
    btn1Obj.addEventListener('click',method2,false);
    btn1Obj.addEventListener('click',method3,false);
    

      执行顺序是method1 -->  method2  -->  method3,

    作为前端开发工程师,最悲剧的莫过于浏览器的兼容问题,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏有前人帮我们做了这件事

    <script>
        function addEvent(elem,evType,fn,useCapture){
            if (elem.addEventListener) {
                elem.addEventListener(evType,fn,useCapture);//DOM 2.0
                return true;
            }else if(elem.attachEvent){
                var r = elem.attachEvent('on'+evType,fn); //IE5+
                return r;
            }else{
                elem['on'+evType] = fn; //DOM 0
            }
        }
    </script>
    

      转载:http://www.oschina.net/question/54100_25614

  • 相关阅读:
    this,static,执行程序的顺序等等留意点
    PHP 中的 $this, static , self ,parent 等等关键字的总结
    css的继承之width属性(容易忽略)
    SDK和API之间有什么关系呢?
    JDK8下载账号分享
    Google大数据三篇著名论文-中文版
    HBase性能优化方法总结
    Hbase原理解析
    Java多线程
    XMind 是一个全功能的思维导图和头脑风暴软件,为激发灵感和创意而生
  • 原文地址:https://www.cnblogs.com/carriezhao/p/7270335.html
Copyright © 2020-2023  润新知