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 相关文章推荐
查询json的数据结构的8种方式简介
Mar 10 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
理解javascript对象继承
Apr 17 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
改进的IP计数器
2006/10/09 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
功能强大的php文件上传类
2016/08/29 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Angularjs 基础入门
2014/12/26 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
使用python进行拆分大文件的方法
2018/12/10 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python的range和linspace使用详解
2019/11/27 Python
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
2014年敬老院工作总结
2014/12/08 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
《花钟》教学反思
2016/02/17 职场文书
创业计划书之寿司
2019/07/19 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
使用Django实现商城验证码模块的方法
2021/06/01 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python