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 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php截取字符串函数分享
2015/02/02 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python找出最小的K个数实例代码
2018/01/04 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
高一家长会邀请函
2014/01/12 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
精彩广告词大全
2014/03/19 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2015年药店工作总结
2015/04/20 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL