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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
使用python加密自己的密码
2015/08/04 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python数据操作方法封装类实例
2017/06/23 Python
python中while和for的区别总结
2019/06/28 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
python的dict判断key是否存在的方法
2020/12/09 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
爱耳日宣传活动总结
2014/07/05 职场文书
四查四看整改措施
2014/09/19 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书