• 对同一个对象绑定多个响应事件并都执行


    1.因为 onclick=" "  添加的元素响应事件,先添加的事件,会被后来添加的事件层叠掉,只能执行最后一个响应的事件

    所以要用到事件监听addElementLitener()来绑定多个处理函数,而因为兼容性的问题需要兼容代码。

    2.在IE8中,addElementLitener()这个函数不被兼容,而使用attachEvent()。但是,这个又不被谷歌,火狐兼容,所以需要写兼容代码

    3.addElementLitener() 有三个参数,而attachEvent()只有两个参数,前一项的响应事件名前面不用加on,IE需要这是他自己因为违背标准指定的,其他版本是为了兼容IE而做出的让步

    4.在浏览器不支持某个方法时,他会返回的是字符串undefined


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>绑定多个事件</title>
    </head>
    <body>
      <input type="button" value="点我不花钱" id="btn">


    <script type="text/javascript">
      function myGet(id){
        return document.getElementById(id);
      }

      function addEventListener(element,type,fn){
        // 这个自定义的函数跟下面的方法重名注意区分
        if(typeof element.addEventListener != "undefined"){
          // 一定要注意,undefined是字符串类型,如果去掉在IE中死循环
          element.addEventListener(type,fn,false);
        }else if(typeof element.attachEvent != "undefined"){
          element.attachEvent("on"+type,fn);
          // 响应事件名字如click应该直接写也能直接表达他的意思,而微软非要在前面加一个"on"
        }else{
          element["on"+type] = fn;
          // 如果浏览器上面两个都不兼容,只能写这样一种
        }
      }


      addEventListener(myGet("btn"),"click",function () {
        console.log("陈小帅");
      });
      addEventListener(myGet("btn"),"click",function () {
        console.log("是真的");
      });
      addEventListener(myGet("btn"),"click",function () {
        console.log("真的好帅啊");
      });
    </script>

    </body>
    </html>

  • 相关阅读:
    npm安装Vue及配置
    Node.js安装
    代码优化总结
    Java 读取文件指定行数的数据
    Navicat Premium 15 v15.0.17 数据库开发工具 安装激活详解
    发现了一个关于 gin 1.3.0 框架的 bug
    802.1X 账号密码+设备信息双重认证
    Vue项目入门(一)
    WPF登录界面
    使用“user32.dll”控制窗体
  • 原文地址:https://www.cnblogs.com/sherryweb/p/10984005.html
Copyright © 2020-2023  润新知