zoukankan      html  css  js  c++  java
  • js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法

    js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真(存在),假设为真则用attachEvent()方法。否则的话就用addEventListener()。
    另外,为了避免每次绑定事件时都要做推断。能够封装一个函数myAddEvent(obj,ev,fn){}。
    代码例如以下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>绑定</title>
        <script>
            window.onload = function()
            {
                var oBtn = document.getElementById("btn1");
                //IE  attachEvent(事件名。函数),此方法仅仅有ie支持,FF和Chrome均不支持
                /*oBtn.attachEvent("onclick",function()
                {
                    alert("a");
                });
                oBtn.attachEvent("onclick",function()
                {
                    alert("b");
                })*/
                //FF和Chrome  addEventListener(事件名。函数),此方法ie不支持
                /*oBtn.addEventListener("click",function()
                {
                    alert("a");
                });
                oBtn.addEventListener("click",function()
                {
                    alert("b");
                })*/
                //兼容写法:if/else推断
                /*if(oBtn.attachEvent)
                {
                    oBtn.attachEvent("onclick",function()
                    {
                        alert("a");
                    });
                    oBtn.attachEvent("onclick",function()
                    {
                        alert("b");
                    })
                }
                else
                {
                    oBtn.addEventListener("click",function()
                    {
                        alert("a");
                    },false);
                    oBtn.addEventListener("click",function()
                    {
                        alert("b");
                    },false)
                }*/
                //另外,还能够把这个兼容写法封装成一个函数,这样就不用每次绑定事件时都要推断一下
                function myAddEvent(obj,ev,fn)    //obj为要绑定事件的元素。ev为要绑定的事件,fn为绑定事件的函数
                {
                    if(obj.attachEvent)
                    {
                        obj.attachEvent("on" + ev,fn);
                    }
                    else
                    {
                        obj.addEventListener(ev,fn,false);
                    }
                }
                myAddEvent(oBtn,"click",function()
                {
                    alert("a");
                })
                myAddEvent(oBtn,"click",function()
                {
                    alert("b");
                })
            }
        </script>
    </head>
    <body>
    <input id="btn1" type="button" value="按钮"/>
    </body>
    </html>
  • 相关阅读:
    JQueryEasyUI学习笔记(五)
    创建文本后,写入文本,报“正由另一进程使用,因此该进程无法访问该文件”
    Ogre wiki Application 运行我们的第一个程序
    我想在年前找一份工作
    C#+XAML的Metro应用开发入门(二)
    C#+XAML的Metro应用开发入门(一)
    疑难问题解决备忘录(1)——LAMP环境下WordPress无法发现themes目录下的主题问题解决
    C#+XAML的Metro应用开发入门(一)
    C#+XAML的Metro应用开发入门(三)
    Struts 2+Spring 3+Hibernate 3.3 在MyEclipse 10环境下的整合配置
  • 原文地址:https://www.cnblogs.com/liguangsunls/p/6920909.html
Copyright © 2011-2022 走看看