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.parse 解析字符串出错的解决方法
Jul 08 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
vue组件实现进度条效果
Jun 06 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP无限分类(树形类)
2013/09/28 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
angular *Ngif else用法详解
2020/12/15 Javascript
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python绘制立方体的方法
2018/07/02 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
购房协议书
2014/04/11 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
花木兰观后感
2015/06/10 职场文书
张丽莉观后感
2015/06/16 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
如何写好活动总结
2019/06/21 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android