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>
以上;可根据场景灵活选择。
最新文章
- Linux设备管理(四)_从sysfs回到ktype
- 苹果iOS强制HTTPS迫在眉睫,距离2017年只剩1天,准备好了么?
- RabbitMQ3.6.3集群搭建+HAProxy1.6做负载均衡
- IT公司100题-8-智力题
- HttpClient简介 post get -转自ibm
- BZOJ1565 植物大战僵尸
- ASP.NET MVC @helper使用说明
- ios开发——实战Swift篇&;简单项目的实现
- ajax提交数据问题
- Sicily 1034. Forest
- (step8.2.7)hdu 1517(A Multiplication Game——巴什博弈变形)
- MYSQL数据库-其他
- HTML学习笔记 域元素(form表单、textarea文本域、fieldset域集合、input使用) 案例 第四节 (原创)
- java ArrayList集合
- 从头开始学gradle【各系统安装gradle】
- 线性表->;链式存储->;线形链表(单链表)
- Python3.0科学计算学习之绘图(三)
- 第十四节、FAST角点检测(附源码)
- Mysql抓包工具 - MySQL Sniffer 使用小结 (含带general_log日志)
- akka共享内存
热门文章
- codeforces 630 I(规律&;&;组合)
- codeforces 651B Beautiful Paintings
- 开发程序过程中遇到的调用Web Api小问题
- 2015年必火的五个Html5移动开发工具推荐
- Unity3D之空间转换学习笔记(一):场景物体变换
- Objective-C :Category
- MSSQL索引优化
- nginx缓存优先级(缓存问题者必看)
- 预览Cube出现没有注册类错误
- (字符串的模式匹配4.7.18)POJ 2406 Power Strings(求一个字符串的最小重复串)