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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
Sep 27 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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 array_search() 函数使用
2010/04/13 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
JS多物体实现缓冲运动效果示例
2016/12/20 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
详解Python中time()方法的使用的教程
2015/05/22 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python定时任务 sched模块用法实例
2019/11/04 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
销售心得体会
2014/01/02 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
烟台的海导游词
2015/02/02 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
民事调解书范文
2015/05/20 职场文书
对讲机知识
2022/04/07 无线电