全面了解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 相关文章推荐
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
vue路由插件之vue-route
Jun 13 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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
php 在文件指定行插入数据的代码
2010/05/08 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP时间和日期函数详解
2015/05/08 PHP
帝国cms目录结构分享
2015/07/06 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
javascript实现数独解法
2015/03/14 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python中温度单位转换的实例方法
2020/12/27 Python
python palywright库基本使用
2021/01/21 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
关于旷工的检讨书
2014/02/02 职场文书
医学生个人求职信范文
2014/02/07 职场文书
音乐幼师求职信
2014/07/09 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
军训新闻稿范文
2015/07/17 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书