javascript事件的绑定基础实例讲解(34)


Posted in Javascript onFebruary 14, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
5个实用的JavaScript新特性
Jun 16 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 #Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 #Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 #Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 #Javascript
js基于myFocus实现轮播图效果
Feb 14 #Javascript
javascript 单例模式详解及简单实例
Feb 14 #Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 #Javascript
You might like
php常用Stream函数集介绍
2013/06/24 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
《太阳》教学反思
2014/02/21 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
小学教师读书活动总结
2014/07/08 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
在校生证明
2015/06/17 职场文书