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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
Exjs 入门篇
Apr 07 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
详解使用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数组
2006/10/09 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
jQuery语法总结和注意事项小结
2012/11/11 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
详解JS预解析原理
2020/06/16 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python如何转换字符串大小写
2020/06/04 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
实验教师岗位职责
2014/02/13 职场文书
团委竞选演讲稿
2014/04/24 职场文书
ktv筹备计划书
2014/05/03 职场文书
秋冬农业生产标语
2014/10/09 职场文书
财务工作失职检讨书
2014/11/21 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
教你一步步实现一个简易promise
2021/11/02 Javascript
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫