曾南华

兼容动态绑定事件 

 

 

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

动态绑定事件在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>

 

 

posted @ 2013-12-15 22:42  啄木鸟￥  阅读(153)  评论(0)    收藏  举报

曾南华