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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
PHP反射API示例分享
2016/10/08 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
理解Javascript闭包
2013/11/01 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python中logging包的使用总结
2018/02/28 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
广告语设计及教案
2014/03/21 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
银行催款通知书
2015/04/17 职场文书
与死神共舞观后感
2015/06/15 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL