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添加控件自定义属性解析
Nov 25 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
微信小程序实现聊天室
Aug 21 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
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
第七节 类的静态成员 [7]
2006/10/09 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
解析php中curl_multi的应用
2013/07/17 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
jQuery 名称冲突的解决方法
2011/04/08 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
采用call方式实现js继承
2014/05/20 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
jQuery中element选择器用法实例
2014/12/29 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
安全保证书范文
2014/04/29 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
《角的度量》教学反思
2016/02/18 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL