zoukankan      html  css  js  c++  java
  • 兼容动态绑定事件

     

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

    动态绑定事件在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>
  • 相关阅读:
    一顿午饭引发的风波
    用exp无法导出空表解决方法/用exp导出数据时表丢失原因
    程序员的不归路
    IIS权限设置
    超级基础搭建Android开发环境
    业务流程图与数据流程图的比较
    发布asp.net应用程序后,其中导入、导出excel报错的解决方案
    Validation of viewstate MAC failed异常的原因及解决方法
    orarcle11g中服务代表的意思
    最新BIOS设置中英文对照表
  • 原文地址:https://www.cnblogs.com/xuehaiyiye/p/3475879.html
Copyright © 2011-2022 走看看