zoukankan      html  css  js  c++  java
  • 对同一个对象绑定多个响应事件并都执行

    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>

  • 相关阅读:
    音频编辑大师 3.3 注冊名 注冊码
    Cocos2d_x的特点及环境配置
    strcpy_s与strcpy的比較
    Android Bundle类
    DB9 公头母头引脚定义及连接
    80x86汇编小站站长简单介绍
    腾讯webqq最新password加密算法,hash算法
    八大排序算法总结
    xpage 获取 附件
    转基因大豆提高大豆油脂产量80%
  • 原文地址:https://www.cnblogs.com/sherryweb/p/10984005.html
Copyright © 2011-2022 走看看