JS中的事件绑定

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){/** 点击按钮以后弹出一个内容*///获取按钮对象var btn01 = document.getElementById("btn01");/** 使用 对象.事件 = 函数 的形式绑定响应函数,* 	它只能同时为一个元素的一个事件绑定一个响应函数,* 	不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的*///为btn01绑定一个单击响应函数/*btn01.onclick = function(){alert(1);};*///为btn01绑定第二个响应函数/*btn01.onclick = function(){alert(2);};*//** addEventListener()* 	- 通过这个方法也可以为元素绑定响应函数*  - 参数:* 		1.事件的字符串,不要on* 		2.回调函数,当事件触发时该函数会被调用* 		3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false* * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,* 	这样当事件被触发时,响应函数将会按照函数的绑定顺序执行* * 这个方法不支持IE8及以下的浏览器*//*btn01.addEventListener("click",function(){alert(1);},false);btn01.addEventListener("click",function(){alert(2);},false);btn01.addEventListener("click",function(){alert(3);},false);*//** attachEvent()* 	- 在IE8中可以使用attachEvent()来绑定事件*  - 参数:* 		1.事件的字符串,要on* 		2.回调函数* *  - 这个方法也可以同时为一个事件绑定多个处理函数,* 		不同的是它是后绑定先执行,执行顺序和addEventListener()相反*//*btn01.attachEvent("onclick",function(){alert(1);});btn01.attachEvent("onclick",function(){alert(2);});btn01.attachEvent("onclick",function(){alert(3);});*//*btn01.addEventListener("click",function(){alert(this);},false);*//*btn01.attachEvent("onclick",function(){alert(this);});*/bind(btn01 , "click" , function(){alert(this);});};//定义一个函数,用来为指定元素绑定响应函数/** addEventListener()中的this,是绑定事件的对象* attachEvent()中的this,是window*  需要统一两个方法this*//** 参数:* 	obj 要绑定事件的对象* 	eventStr 事件的字符串(不要on)*  callback 回调函数*/function bind(obj , eventStr , callback){if(obj.addEventListener){//大部分浏览器兼容的方式obj.addEventListener(eventStr , callback , false);}else{/** this是谁由调用方式决定* callback.call(obj)*///IE8及以下obj.attachEvent("on"+eventStr , function(){//在匿名函数中调用回调函数callback.call(obj);});}}</script></head><body><button id="btn01">点我一下</button></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/325613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

揭秘阿里秒级百万TPS平台架构实现

转载自 揭秘阿里秒级百万TPS平台架构实现 导读&#xff1a;搜索离线数据处理是一个典型的海量数据批次/实时计算结合的场景&#xff0c;阿里搜索中台团队立足内部技术结合开源大数据存储和计算系统&#xff0c;针对自身业务和技术特点构建了搜索离线平台&#xff0c;提供复杂…

相对你们说的一些话

135编辑器1田文豪&#xff1a;文豪&#xff0c;最近上课我看你很认真&#xff0c;面试题也背的挺好的&#xff0c;你在很努力的学习了&#xff0c;这是一个非常好的趋势&#xff0c;希望你能一直保持下去。你的脑字也是很灵活的&#xff0c;好几次考试都超出了我的预想&#xf…

Yolov3参数解释以及答疑

Yolov3参数解释以及答疑

Build 2017 | 一文看懂微软 Build 2017 大会:让 AI 走向边缘

200 多家明星企业&#xff0c;20 位著名投资机构顶级投资人共同参与&#xff01;「新智造成长榜」致力于发掘 AI 领域有 “三年十倍” 成长潜力的创新公司&#xff0c;下一波 AI 独角兽&#xff0c;会有你么&#xff1f;点击阅读原文了解详情&#xff01; 雷锋网按&#xff1a;…

JS键盘监听事件

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">window.onload function(){/** 键盘事件&#xff1a;* onkeydown* - 按键被按下* - 对于onkeydown来说…

一文带你理解Java中Lock的实现原理

转载自 一文带你理解Java中Lock的实现原理 当多个线程需要访问某个公共资源的时候&#xff0c;我们知道需要通过加锁来保证资源的访问不会出问题。java提供了两种方式来加锁&#xff0c;一种是关键字&#xff1a;synchronized&#xff0c;一种是concurrent包下的lock锁。syn…

请19级的童鞋们接收一下

135编辑器1李磊&#xff1a;磊&#xff0c;假期过的可好&#xff1f;有没有人在写作业呀&#xff1f;通过这段时间的学习&#xff0c;可以看得出你对我们的课程兴趣浓厚&#xff0c;尤其是scratch&#xff0c;自己做了好多的案例&#xff0c;之前还以为你们都是从网上直接下载的…

Spring-boot IDEA使用注解@ConfigurationProperties时报错解决

使用注解ConfigurationProperties报错 使用ConfigurationProperties注解&#xff0c;以前用的挺好没出现问题&#xff0c;换了IDEA的版本使用&#xff0c;发现报错了&#xff0c;具体报错如下&#xff1a; Spring Boot Configuration Annotation Processor not found in class…

微软Build 2017首日主角AI 同时发布.NET Core 2.0 Preview 1

软公司一年一度的开发者大会&#xff0c;即“Microsoft Build 2017”在总部西雅图正式开幕。按照官方安排&#xff0c;本次大会将持续 3 天&#xff0c;主题围绕微软公司各项最新技术成果的展示和研讨&#xff0c;包括与微软相关的产业界人士的沟通和互动&#xff0c;以及对未来…

JS操作地址栏Location

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">/** Location* - 该对象中封装了浏览器的地址栏的信息*/window.onload function(){//获取按钮对象var btn…

彻底理解HashMap的元素插入原理

转载自 彻底理解HashMap的元素插入原理 HashMap&#xff0c;是Java语言中比较基础也比较重要的一种数据结构&#xff0c;由于其用途广泛&#xff0c;所以&#xff0c;Java的工程师在设计HashMap的时候考虑了很多因素。 通过阅读HashMap的源码&#xff0c;可以学习到很多知识…

使用C#操作XML文件

今天更新一篇技术文章&#xff0c;使用C#实现对XML的操作&#xff1a;首先需要准备一个测试的XML文件&#xff0c;我这边命名为test.xml:文件内容为&#xff1a;<test><id>1</id><name>张三</name><age>18</age><id>2</id&…

Linux使用Jexus托管Asp.Net Core应用程序

第一步 安装.Net Core环境 安装 dotnet 环境参见官方网站 https://www.microsoft.com/net/core。 选择对应的系统版本进行安装。安装完成过后 输入命令查看版本&#xff0c;目前最新版为 1.04&#xff1a; dotnet --version 此时已经可以发布Asp.Net Core应用程序到Linux上…

C++字符串分割替换 ubuntu版本

#include <iostream> #include <string> #include <vector> using namespace std; vector<string> mySplit(const string& str,string sp_string) // split(),str 是要分割的string { vector<string> vecString; int sp_stringLen sp_st…

优秀学生专栏——董超

优秀学生--董超今天回访了下17级优秀学生董超同学&#xff0c;董超同学在校期间一直担任小组组长&#xff0c;平时学习刻苦认真&#xff0c;各个阶段的项目也做的非常优秀&#xff0c;今年5月份左右毕业&#xff0c;所在岗位是开发&#xff0c;目前的薪资在5000左右&#xff0c…

高级开发必须理解的Java中SPI机制

转载自 高级开发必须理解的Java中SPI机制 本文通过探析JDK提供的&#xff0c;在开源项目中比较常用的Java SPI机制&#xff0c;希望给大家在实际开发实践、学习开源项目提供参考。 SPI是什么 SPI全称Service Provider Interface&#xff0c;是Java提供的一套用来被第三方实…

JS中的延时调用

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><script type"text/javascript">var num 1;//开启一个定时器/*setInterval(function(){console.log(num);},3000);*//** 延时调用&#xff…

动态代理JDK于cglib

静态代理的缺点&#xff1a; 1、由于静态代理中的代理类是针对某一个类去做代理的&#xff0c;那么假设一个系统中有100个Service&#xff0c;则需要创建100个代理类 2、如果一个Service中有很多方法需要事务&#xff08;增强动作&#xff09;&#xff0c;发现代理对象的方法中…

以深圳.NET俱乐部名义 的技术交流会圆满成功

2017年5月13日的深圳下着暴雨&#xff0c;一场以深圳.NET俱乐部名义的.NET技术交流会在微软Build 2017刚闭幕时在罗湖布吉路与翠山路交界处富基PARK国际6F举办&#xff0c;这次交流以微软Build 2017 大会发布的.NET Standard 2.0 Preview1/.NET Core 2.0 Preview 1为契机&#…

C#中的序列化和反序列化

序列化&#xff1a;是将对象的状态存储到特定存储介质的过程&#xff0c;也可以说是将对象状态转换为可保持或传输的格式的过程。 上面的解释是官方定义&#xff0c;大白话解释就是&#xff0c;将对象以二进制的方式存储在文件中&#xff0c;如果简简单单的将一些数据或者内容存…