javascript事件的绑定基础实例讲解（34）

网络编程 2025/3/2 佚名

3 2 1

本文实例为大家分享了js事件绑定的具体代码，供大家参考，具体内容如下

<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <script type="text/javascript"> 
    
   window.onload = function(){ 
     
    var btn01 = document.getElementById("btn01"); 
     
    //为按钮绑定一个单击响应函数 
    /*btn01.onclick = function(){ 
     alert(1); 
    }; 
     
    //再为按钮绑定一个单击响应函数 
    btn01.onclick = function(){ 
     alert(2); 
    };*/ 
     
    /* 
     * 使用 对象.事件 的形式不能同时为一个元素的同一个事件绑定多个处理函数， 
     * 如果绑定了多个，则后边的会将前边的覆盖掉 
     * 
     * 如果需要同时为一个事件绑定多个响应函数，则可以使用 
     * addEventListener()这个方法来绑定响应函数 
     *  参数： 
     *   1.要绑定的事件（字符串 不要on） 
     *   2.回调函数（事件触发时，该函数将会执行） 
     *   3.是否在捕获阶段触发事件（都传false） 
     * 
     * 使用这种方式可以同时为一个事件绑定多个响应函数， 
     *  响应函数按照绑定的顺序执行 
     * 
     * 该方法不支持IE8及以下的浏览器 
     *  在这些浏览器中需要使用 attachEvent()方法来实现相同的功能 
     */ 
     
    /*btn01.addEventListener("click",function(){ 
     alert(1); 
    },false); 
     
    btn01.addEventListener("click",function(){ 
     alert(2); 
    },false); 
     
    btn01.addEventListener("click",function(){ 
     alert(3); 
    },false);*/ 
     
    /* 
     * attachEvent() 
     * - 参数： 
     *  1.事件的类型（字符串 要on） 
     *  2.回调函数 
     * 
     * attachEvent() 
     * - 可以同时为一个事件绑定多个响应函数，但是它的执行顺序不一定 
     *  ie9 ie10 先绑定先执行 
     *  ie8 后绑定先执行 
     * 
     * 这个方法只支持IE10及以下的浏览器 
     */ 
    /*btn01.attachEvent("onclick" , function(){ 
     alert(1); 
    });*/ 
     
    /*btn01.attachEvent("onclick" , function(){ 
     alert(2); 
    }); 
     
    btn01.attachEvent("onclick" , function(){ 
     alert(3); 
    });*/ 
     
    /* 
     * 在正常浏览器中使用addEventListener()来绑定 
     *  它的响应函数中的this就是绑定事件的对象 
     * 而在IE中，使用的是attachEvent()来绑定的事件 
     *  而它的响应函数中的this是window 
     */ 
    bind(btn01 , "click" , function(){ 
     alert(this); 
    }); 
     
   }; 
    
   /* 
    * 自定义一个函数，来兼容所有的浏览器 
    * 参数： 
    *  obj 要绑定事件的对象 
    *  eventStr 事件的字符串,不要on 
    *  callback 回调函数，事件触发时调用的函数 
    */ 
   function bind(obj , eventStr , callback){ 
     
    if(obj.addEventListener){ 
     //如果是正常浏览器 
     obj.addEventListener(eventStr , callback , false); 
    }else{ 
     //IE8 
     /* 
      * attachEvent()中的回调函数的this是window，需要修改为obj 
      * this是谁由函数的调用方式决定 
      * 1.以函数的形式调用，this是window 
      * 2.以方法的形式调用，this是调用方法的对象 
      * 3.以构造函数的形式调用，this是新创建的对象 
      * 4.使用call和apply调用时，this是第一个参数 
      */ 
     obj.attachEvent("on"+eventStr , function(){ 
      //在attchEvent()中不传递callback而是传递一个匿名函数 
      //这样在事件触发时，浏览器不会调用callback而是调用匿名函数 
      //在匿名函数中来调用回调函数 
      callback.call(obj); 
       
     }); 
    } 
   } 
    
    
  </script> 
 </head> 
 <body> 
   
  <button id="btn01">点我一下</button> 
   
 </body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,事件绑定

标签：

js,事件绑定

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“javascript事件的绑定基础实例讲解（34）”

javascript事件的绑定基础实例讲解（34）

暂无“javascript事件的绑定基础实例讲解（34）”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2025年03月02日

javascript事件的绑定基础实例讲解（34）

js,事件绑定

基于canvas的二维码邀请函生成插件

javascript深拷贝和浅拷贝详解

评论“javascript事件的绑定基础实例讲解（34）”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接