JavaScript 三种绑定事件方式之间的区别
JavaScript三种绑定事件的方式:
1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
<script>
function clickone(){ alert("hello"); }
</script>
2. <div id="btn"></div>
<script>
document.getElementById("btn").onclick = function(){ alert("hello"); } //脚本里面绑定
</script>
3. <div id="btn"></div>
<script>
document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数
function clickone(){ alert("hello"); }
</script>
那么问题来了,1 和 2 的方式是我们经常用到的,那么既然已经有两种绑定事件的方法为什么还要有第三种呢?答案是这样的:
用 "addeventlistener" 可以绑定多次同一个事件,且都会执行,而在DOM结构如果绑定两个 "onclick" 事件,只会执行第一个;在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div>
<script>
function clickone(){ alert("hello"); } //执行这个
function clicktwo(){ alert("world!"); }
</script>
2. <div id="btn"></div>
<script>
document.getElementById("btn").onclick = function(){ alert("hello"); }
document.getElementById("btn").onclick = function(){ alert("world"); } //执行这个
</script>
3. <div id="btn"></div>
<script>
document.getElementById("btn").addeventlistener("click",clickone,false);
function clickone(){ alert("hello"); } //先执行
document.getElementById("btn").addeventlistener("click",clicktwo,false);
function clicktwo(){ alert("world"); } //后执行
</script>
以上;可根据场景灵活选择。
JavaScript 三种绑定事件方式之间的区别的更多相关文章
- JavaScript三种绑定事件的方式
JavaScript三种绑定事件的方式: 1. <div id="btn" onclick="clickone()"></div> // ...
- java设计模式---三种工厂模式之间的区别
简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...
- Binding 中 Elementname,Source,RelativeSource 三种绑定的方式
在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...
- js this详解,事件的三种绑定方式
this,当前触发事件的标签 在绑定事件中的三种用法: a. 直接HTML中的标签里绑定 onclick="fun1()"; b. 先获取Dom对象,然后利用dom对象在js里绑定 ...
- java Data、String、Long三种日期类型之间的相互转换
java Data.String.Long三种日期类型之间的相互转换 // date类型转换为String类型 // formatType格式为yyyy-MM-dd HH:mm:ss// ...
- v-bind绑定属性样式——class的三种绑定方式
1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...
- Dom事件的三种绑定方式
1.事件 2. onclick, onblur, onfocus, 需求:请写出一个行为,样式,结构,相分离的页面. JS, CSS, HTML, 示例1,行为结构样式粘到一起的页面: & ...
- spring boot:thymeleaf模板中insert/include/replace三种引用fragment方式的区别(spring boot 2.3.3)
一,thymeleaf模板中insert/include/replace三种引用fragment方式的区别 insert: 把整个fragment(包括fragment的节点tag)插入到当前节点内部 ...
- JavaScript中的三种弹出框的区别与使用
JavaScript中有三种原生的弹出框,分别是alert.confirm.prompt.分别表示弹出框.确认框.信息框. 以下是示例代码: <!DOCTYPE html> <htm ...
随机推荐
- TextKit学习(三)NSTextStorage,NSLayoutManager,NSTextContainer和UITextView
先上一张图: 这是使用UITextView时用到的iOS7新增加的类:NSTextContainer.NSLayoutManager.NSTextStorage及其相互关系: 这三个新出的类还没有在官 ...
- 在VB中利用Nuget包使用SQLite数据库和Linq to SQLite
上午解决了在C#中利用Nuget包使用SQLite数据库和Linq to SQLite,但是最后生成的是C#的cs类文件,对于我这熟悉VB而对C#白痴的来说怎么能行呢? 于是下午接着研究,既然生成的是 ...
- cocos2d-x 仿真树叶飘落效果的实现
转自:http://blog.csdn.net/ufolr/article/details/7624851 最近项目中需要一个落叶的效果,本来想用粒子特效来实现,但是几经调试,虽然调出了落叶的效果,但 ...
- 配置错误 在唯一密钥属性“fileExtension”设置为“.log”时,无法添加类型为“mimeMap”的重复集合项
错误提示: 配置错误 在唯一密钥属性“fileExtension”设置为“.log”时,无法添加类型为“mimeMap”的重复集合项 配置文件 \\?\D:\www\abc\web.config 出现 ...
- WCF 新手教程二
基本知识: [ServiceContract] Attribute 能够有以下Property 的: CallbackContract 设置callback的类型:Duplicate指Service ...
- Anroid自定义RatingBar,显示半个(小数个)的stepSize时,变为整数个的问题
<RatingBar android:id="@+id/rb_starbar" style="@style/joblist_item_ratingbar_style ...
- Percona-Galera-Monitoring-Template监控模板说明
http://blog.chinaunix.net/uid-16844903-id-4054635.html 官网链接:http://www.percona.com/doc/percona-monit ...
- UNIX基础知识之时间值
本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 长期以来,UNIX系统一直使用两种不同的时间值 ...
- linq小知识总结
1linq的左连接查询 var boundList = from x in text.S_Outbound join y in text.S_Outbound_Per on x.Shipment_ID ...
- 在Linux使用mingw32来编写win32程序
MinGW - Minimalist GNU For Windows Mingw32 是 GNU 計畫工具的集合,包含了大量的標頭檔(header files).函式庫與指 令程式.目的在提供免費的工 ...