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>
  • 相关阅读:
    jq 比较五获取结构树的位置 eq() 或者parent
    jq 笔记四 end的用法
    jq 笔记三 find的用法
    jq 笔记二filter()用法
    jq 笔记一 选择器中的逗号
    Linux 笔记五 搜索命令的命令
    linux 笔记四 文件搜索(locate)
    使用ansible时显示Failed to connect to the host via ssh
    linux音频解码软件ffmpeg的安装
    centos服务器jenkins安装配置
  • 原文地址:https://www.cnblogs.com/xuehaiyiye/p/3475879.html
Copyright © 2011-2022 走看看