全面了解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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
JS之相等操作符详解
Sep 13 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
js图片上传的封装代码
Aug 01 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
解决ie img标签内存泄漏的问题
Oct 13 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 curl_init函数用法
2014/01/31 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
Javascript缓存API
2016/06/14 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python自动发送邮件脚本
2018/06/20 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
高三毕业寄语
2014/04/10 职场文书
企业宣传策划方案
2014/05/29 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
安全责任书
2015/01/29 职场文书
nginx之queue的具体使用
2022/06/28 Servers