全面了解addEventListener和on的区别


Posted in Javascript onJuly 14, 2016

为什么需要addEventListener?

先来看一个片段:

html代码

<div id="box">追梦子</div>

用on的代码

window.onload = function(){
  var box = document.getElementById("box");
  box.onclick = function(){
    console.log("我是box1");
  }
  box.onclick = function(){
    box.style.fontSize = "18px";
    console.log("我是box2");
  }
}

 运行结果:“我是box2”

看到了吧,第二个onclick把第一个onclick给覆盖了,虽然大部分情况我们用on就可以完成我们想要的结果,但是有时我们又需要执行多个相同的事件,很明显如果用on完成不了我们想要的,那不用猜,你们肯定知道了,对!addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。

用addEventListener的代码

window.onload = function(){
  var box = document.getElementById("box");
  box.addEventListener("click",function(){
    console.log("我是box1");
  })
  box.addEventListener("click",function(){
    console.log("我是box2");
  })
}

运行结果:我是box1




 我是box2

addEventListenert方法第一个参数填写事件名,注意不需要写on,第二个参数可以是一个函数,第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理,第三个参数可以省略,大多数情况也不需要用到第三个参数,不写第三个参数默认false

第三个参数的使用

有时候的情况是这样的

<body>

<div id="box">

<div id="child"></div>

</div>
</body>

如果我给box加click事件,如果我直接单击box没有什么问题,但是如果我单击的是child元素,那么它是怎么样执行的?(执行顺序)

box.addEventListener("click",function(){
  console.log("box");
})

child.addEventListener("click",function(){
  console.log("child");
})
执行的结果:




child




box

也就是说,默认情况事件是按照事件冒泡的执行顺序进行的。

如果第三个参数写的是true,则按照事件捕获的执行顺序进行的。

box.addEventListener("click",function(){
  console.log("box");
},true)

child.addEventListener("click",function(){
  console.log("child");
})
执行的结果:




box




child

事件冒泡执行过程:

从最具体的的元素(你单击的那个元素)开始向上开始冒泡,拿我们上面的案例讲它的顺序是:child->box

事件捕获执行过程:

从最不具体的元素(最外面的那个盒子)开始向里面冒泡,拿我们上面的案例讲它的顺序是:box->child

以上这篇全面了解addEventListener和on的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
js计算系统当前日期是星期几的方法
Jul 14 #Javascript
原生javascript 学习之js变量全面了解
Jul 14 #Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 #Javascript
AngularJS实用开发技巧(推荐)
Jul 13 #Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 #Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 #Javascript
原生js仿jquery animate动画效果
Jul 13 #Javascript
You might like
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
四种会话跟踪技术
2015/05/20 面试题
护士自我介绍信
2014/01/13 职场文书
中考标语大全
2014/06/05 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
民事答辩状范本
2015/05/21 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server