JavaScript三种绑定事件方式及相互之间的区别分析


Posted in Javascript onJanuary 10, 2017

本文实例讲述了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>

以上;可根据场景灵活选择。

PS:关于javascript常用事件及相关说明还可参考本站在线工具:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 #Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 #Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 #Javascript
jQuery验证表单格式的使用方法
Jan 10 #Javascript
Html5 js实现手风琴效果
Apr 17 #Javascript
jquery做个日期选择适用于手机端示例
Jan 10 #Javascript
javascript删除html标签函数cIsHTML
Jan 09 #Javascript
You might like
用Zend Encode编写开发PHP程序
2010/02/21 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python中的函数用法入门教程
2014/09/02 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
Python如何输出警告信息
2020/07/30 Python
Python hashlib模块的使用示例
2020/10/09 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
个人求职信范文分享
2014/01/31 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
商铺租赁意向书
2014/04/01 职场文书
出国英文推荐信
2014/05/10 职场文书
投诉书格式范本
2015/07/02 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android