兼容动态绑定事件

 

此文章是帮助班上的一个同学学习,本人菜鸟,请各路大神指点或者绕道

动态绑定事件在IE内核 和 火狐等相同的内核下分为两种情况  ,
1. attachEvent,
2.addEventListener
下面我们用代码的形式来演示

在火狐下运行:  

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="NANF.js"></script>
    <script type="text/javascript">
        function init(){                   //初始函数
            var testObj=document.getElementById("test");     //得到Id为test 的元素
            testObj.addEventListener("click",function(){
                alert("我在火狐下运行");
            });

        }
    </script>

</head>
<body onload="init()">
    <input id="test" type="button" value="测试">

</body>
</html>

 注: addEventListener("click",function(){})    click 前面不用加 “on”  

在IE下运行:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="NANF.js"></script>
    <script type="text/javascript">
        function init(){                   //初始函数
            var testObj=document.getElementById("test");     //得到Id为test 的元素
            testObj.attachEvent("onclick",function(){
                alert("我在IE下运行");
            });

        }
    </script>

</head>
<body onload="init()">
    <input id="test" type="button" value="测试">

</body>
</html>

 为了兼容火狐和IE :

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="NANF.js"></script>
    <script type="text/javascript">
        function init(){                   //初始函数
            var testObj=document.getElementById("test");     //得到Id为test 的元素
            if(navigator.appName == "Netscape")  {          //判断是否为火狐
                testObj.addEventListener("click",function(){
                      alert("都能运行");
                });
            }
            else {
                testObj.attachEvent("onclick",function(){
                    alert("都能运行");
                });
            }

        }
    </script>

</head>
<body onload="init()">
    <input id="test" type="button" value="测试">

</body>
</html>
原文地址:https://www.cnblogs.com/xuehaiyiye/p/3475879.html