全面了解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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
解决VUE双向绑定失效的问题
Oct 29 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 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 csv操作类代码
2009/12/14 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Python修改Excel数据的实例代码
2013/11/01 Python
Python实现处理管道的方法
2015/06/04 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python如何实现word批量转HTML
2020/09/30 Python
幼儿园母亲节活动方案
2014/03/10 职场文书
规划编制实施方案
2014/03/15 职场文书
股东授权委托书范文
2014/09/13 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
邀请函格式范文
2015/02/02 职场文书
2016年父亲节寄语
2015/12/04 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers
SQL中的连接查询详解
2022/06/21 SQL Server