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 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
React如何避免重渲染
2018/04/10 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python最长公共子串算法实例
2015/03/07 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Java及python正则表达式详解
2017/12/27 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
服务员岗位责任制
2014/02/11 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
《春雨》教学反思
2014/04/24 职场文书
淘宝店策划方案
2014/06/07 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
学生检讨书范文
2015/01/27 职场文书
文案策划岗位职责
2015/02/11 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis