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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
js的2种继承方式详解
Mar 04 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
详解Django中的form库的使用
2015/07/18 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python中字符串的编码与解码详析
2020/12/03 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
C语言笔试题回忆
2015/04/02 面试题
管理部部长岗位职责
2013/12/05 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
Android实现图片九宫格
2022/06/28 Java/Android