addEventListener和on的区别
为什么需要addEventListener？
先来看一个片段：
html代码
<div id="box">追梦子</div>
用on的代码
1 window.onload = function(){
2 var box = document.getElementById("box");
3 box.onclick = function(){
4 console.log("我是box1");
5 }
6 box.onclick = function(){
7 box.style.fontSize = "18px";
8 console.log("我是box2");
9 }
10 }
运行结果：“我是box2”
看到了吧，第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，那不用猜，你们肯定知道了，对！addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。
用addEventListener的代码
1 window.onload = function(){
2 var box = document.getElementById("box");
3 box.addEventListener("click",function(){
4 console.log("我是box1");
5 })
6 box.addEventListener("click",function(){
7 console.log("我是box2");
8 })
9 }
运行结果：我是box1
我是box2
addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数,不写第三个参数默认false
第三个参数的使用
有时候的情况是这样的
<body>
<div id="box">
<div id="child"></div>
</div>
</body>
如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）
1 box.addEventListener("click",function(){
2 console.log("box");
3 })
4
5 child.addEventListener("click",function(){
6 console.log("child");
7 })
执行的结果：
child
box
也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。
如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。
1 box.addEventListener("click",function(){
2 console.log("box");
3 },true)
4
5 child.addEventListener("click",function(){
6 console.log("child");
7 })
执行的结果：
box
child
事件冒泡执行过程：
从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box
事件捕获执行过程：
从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child
addEventListener和on的区别的更多相关文章
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- addEventListener和attachEvent的区别（转载）
attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.I ...
- addEventListener和attachEvent的区别
addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...
- addEventListener和attachEvent的区别 分类： JavaScript 2015-05-12 19:03 702人阅读 评论(0) 收藏
addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...
- addEventListener和onclick的区别
onclick只出现一次alert:我是click2[很正常第一次click事件会被第二次所覆盖],但是addEventListener却可以先后运行,不会被覆盖[正如:它允许给一个事件注册多个监听器 ...
- addEventListener attachEvent和解决IE 6 7 8 this指向错误
[JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误 电梯直达 1# php 发表于 2014/4/13 01:17 | 只看该作者 ...
- 函数语法：Js之on和addEventListener的使用与不同
一.addEventListener语法 DOM标准:elem.addEventListener("事件名",函数对象,是否在捕获阶段触发) ---是否在捕获阶段触发= true/ ...
- addEventListener()方法
★JS事件的捕获阶段和冒泡阶段: 讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到Paren ...
- addEventListener 和 onclick 简单比较
首先说一下addEventListener 语法: element.addEventListener(event, function, useCapture) 这里的event是事件名,functio ...
随机推荐
- js-JavaScript高级程序设计学习笔记17
第21章 AJAX AJAX技术的核心是XMLHttpRequest对象.可以使用XHR对象取得新数据,然后通过DOM将新数据插入到页面中.无需刷新页面即可从服务器获得数据. 1.XHR对象. 如果 ...
- springMVC-错误消息的显示和国际化
显示:在页面添加<form:errors path="*">会把错误消息集中显示在一块 在页面添加<form:errors path="lastname ...
- poj3502 恶心题
巨恶心的一个题::>_<:: 题意:给出航班航线和大陆,找航线上距离大陆最远的某一点距离大陆边缘的距离 标准算法:二分答案,从大陆边界向外扩展,扩展出来的面积会覆盖航线.找出航线上最后被覆 ...
- Lamp源码搭建
Lamp Centos6.5 + Apache/2.2.29 + PHP 5.3.29 + Mysql5.6.20 Apache(/usr/local/apache) PHP(/usr/local/b ...
- C#实体图片下载与批量下载（自动保存功能）
新工作,第一个小任务,制作一个点击下载图片的功能.并提供批量下载操作.图片是字节流的形式,存放在数据库中的. 为了避免直接从数据库中,下载失败,会在本地保存一份. 进行压缩的是SharpZip这个压缩 ...
- JAVA线程池的分析和使用
1. 引言 合理利用线程池能够带来三个好处.第一:降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗.第二:提高响应速度.当任务到达时,任务可以不需要等到线程创建就能立即执行.第三:提 ...
- Java反射机制实例解析
1.获取想操作的访问类的java.lang.Class类的对象 2.调用Class对象的方法返回访问类的方法和属性信息 3.使用反射API来操作 每个类被加载后,系统会为该类 ...
- python03 面向对象的编程01
话不多说,直接进入正文: 编程思想: 我个人所了解的有2种,还有个函数式编程的概念模模糊糊(大概是把常用的代码封装成一个函数,重复调用即可,先认为就是这样吧) 1 面向对象:面向对象是把所有的事务物当 ...
- Django中Celery的实现介绍（一）
Django中Celery的实现 Celery官网http://www.celeryproject.org/ 学习资料:http://docs.jinkan.org/docs/celery/ Cele ...
- Python 抓取网页并提取信息(程序详解)
最近因项目需要用到python处理网页,因此学习相关知识.下面程序使用python抓取网页并提取信息,具体内容如下: #---------------------------------------- ...