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 相关文章推荐
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
微信小程序实现底部导航
Nov 05 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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来实现网络服务
2009/09/15 PHP
php xml 入门学习资料
2011/01/01 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
php表单提交实例讲解
2015/11/12 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
Prototype Template对象 学习
2009/07/19 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
python实现指定字符串补全空格的方法
2015/04/30 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
python自定义函数def的应用详解
2020/06/03 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
《云雀的心愿》教学反思
2014/02/25 职场文书
企业新年寄语
2014/04/04 职场文书
上班迟到检讨书
2015/05/06 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书