为什么需要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的区别的更多相关文章

  1. Javascript中addEventListener和attachEvent的区别

    在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...

  2. addEventListener和attachEvent的区别（转载）

    attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attachEvent——兼容:IE7.IE8:不兼容firefox.chrome.I ...

  3. addEventListener和attachEvent的区别

    addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

  4. addEventListener和attachEvent的区别 分类： JavaScript 2015-05-12 19:03 702人阅读 评论(0) 收藏

    addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

  5. addEventListener和onclick的区别

    onclick只出现一次alert:我是click2[很正常第一次click事件会被第二次所覆盖],但是addEventListener却可以先后运行,不会被覆盖[正如:它允许给一个事件注册多个监听器 ...

  6. addEventListener attachEvent和解决IE 6 7 8 this指向错误

    [JS] addEventListener attachEvent和解决IE 6 7 8 this指向错误   电梯直达 1#    php 发表于 2014/4/13 01:17 | 只看该作者  ...

  7. 函数语法：Js之on和addEventListener的使用与不同

    一.addEventListener语法 DOM标准:elem.addEventListener("事件名",函数对象,是否在捕获阶段触发) ---是否在捕获阶段触发= true/ ...

  8. addEventListener()方法

    ★JS事件的捕获阶段和冒泡阶段: 讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到Paren ...

  9. addEventListener 和 onclick 简单比较

    首先说一下addEventListener 语法: element.addEventListener(event, function, useCapture) 这里的event是事件名,functio ...

随机推荐

  1. 【BZOJ-4548&3658】小奇的糖果&Jabberwocky 双向链表 + 树状数组

    4548: 小奇的糖果 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 103  Solved: 47[Submit][Status][Discuss] ...

  2. 【bzoj2654】 tree

    http://www.lydsy.com/JudgeOnline/problem.php?id=2654 (题目链接) 题意 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有nee ...

  3. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

  4. 高性能JavaScript（您值得一看）

    众所周知浏览器是使用单进程处理UI更新和JavaScript运行等多个任务的,而同一时间只能有一个任务被执行,如此说来,JavaScript运行了多长时间就意味着用户得等待浏览器响应需要花多久时间. ...

  5. javascript 未来新方法的介绍

    JavaScript1.6数组方法的扩展 var tmp = [1, 2, 3, 4, 5, 3]; console.log('indexOf:找出数组中某一对象的下标,如果没有则为-1'); con ...

  6. Nginx系列5之让Nginx支持HTTP1.1

    preface nginx在反向代理HTTP协议的时候,默认使用的是HTTP1.0去向后端服务器获取响应的内容后在返回给客户端. HTTP1.0和HTTP1.1的一个不同之处就是,HTTP1.0不支持 ...

  7. DNS(二)之bind的视图功能

    bind视图工作原理 在我国目前的网络环境下面,多个运营商并存,运营商之间的存在一定的网络互通问题,如果把来自不同的运营商或者地域的所有用户通过简单的A记录分配到一个机房,那么就存在部分网民访问延时大 ...

  8. UVA11987Almost Union-Find（并查集删除节点）

    题目链接 题意:n个数(即1-n)和m个操作: 1表示把x和y合并,2表示把x移到y集合里面,3表示统计x集合的元素个数 1,3好说,关键是2操作,可以先把2删除掉,删除的操作可以找一个其他的数字来取 ...

  9. HTML之表格制作

    如何制作一个表格? 如何制作一个表格呢?  观察如下代码: <!DOCTYPE html> <html lang="en"> <head> &l ...

  10. python bottle框架

    python bottle框架 简介: Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. Bottl ...