为什么需要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代表冒泡阶段处理，第三个参数可以省略，大多数情况也不需要用到第三个参数。

第三个参数的使用

有时候的情况是这样的

<body>
　　<div id="box">
　　　　<div id="child"></div>
　　</div>
</body>

如果我给box加click事件，如果我直接单击box没有什么问题，但是如果我单击的是child元素，那么它是怎么样执行的？（执行顺序）

box.addEventListener("click",function(){
    console.log("box");
}，false)

child.addEventListener("click",function(){
    console.log("child");
},false)
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

也就是说，默认情况事件是按照事件冒泡的执行顺序进行的。

如果第三个参数写的是true，则按照事件捕获的执行顺序进行的。

box.addEventListener("click",function(){
    console.log("box");
},true)

child.addEventListener("click",function(){
    console.log("child");
},true)
　　执行的结果：
　　　　　　　　box
　　　　　　　　child

事件冒泡执行过程：

　　　　　　　　从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们上面的案例讲它的顺序是：child->box

事件捕获执行过程：

　　　　　　　　从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们上面的案例讲它的顺序是：box->child

备注：ie支持window.attachEvent添加侦听事件，非ie用window.addEventListener添加侦听事件　　

target.addEventListener(type,listener,useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。 
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener); 
target： 文档节点、document、window 或 XMLHttpRequest。 
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 　　

　

addEventListener详解的更多相关文章

  1. attachEvent和addEventListener详解

    attachEvent方法可以动态的为网页内的元素添加一个事件．通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.使用attachEvent则不必这样做．你把写好的事件 ...

  2. (转)addEventListener()与removeEventListener()详解

    转自:http://www.111cn.net/wy/js-ajax/48004.htm addEventListener()与removeEventListener()用于处理指定和删除事件处理程序 ...

  3. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  4. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  5. JavaScript事件详解-Zepto的事件实现（二）【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  6. ****基于H5的微信支付开发详解[转]

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  7. 「JavaScript」四种跨域方式详解

    超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript 的同源策略,并且了解使用跨域跨域的理由. 1. JSONP 首先要介绍的跨域方法必然是 JSON ...

  8. javascript event（事件对象）详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  9. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

随机推荐

  1. 【原创】自己动手写工具----XSmartNote [Beta 3.0]

    一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...

  2. js 中关联数组

    以前都不知道这种写法叫做关联数组. 何为关联数组呢.通常的数组在填充时会隐式或者显示指定数组下标,但JS中数组可以以名字的形式为元素赋值,这就形成了关联数组. 例子 var p={ name:'dai ...

  3. ionic 获取手机所在位置

    之前项目中需要使用到定位功能,前边的文章提到的坐标位置是有问题的,是国际坐标,国内的环境使用google地图会出现问题,所以需要使用国内的地图进行坐标解析,因为国内和国外的坐标体系不一致,需要通过转换 ...

  4. SVN 错误 Access to SVN Repository Forbidden的原因及解决方法

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/SVN_Access_to_SVN_Repository_Forbidden.html   当我们新 ...

  5. 矢量图绘制工具Svg-edit调整画布的大小

    矢量图绘制工具Svg-edit调整画布的大小 ------------------------------ ------------------------

  6. 逆向工程学习第四天--Windows栈溢出保护机制(GS)原理及绕过测试

    GS简介: Windows的缓冲区安全监测机制(GS)可以有效的阻止经典的BOF攻击,因为GS会在函数调用前往函数栈帧内压入一个随机数(canary),然后等函数返回前,会对canary进行核查,判断 ...

  7. Base64编码【转】

    转http://www.cnblogs.com/luguo3000/p/3940197.html 开发者对Base64编码肯定很熟悉,是否对它有很清晰的认识就不一定了.实际上Base64已经简单到不能 ...

  8. 如何正确配置Nginx+PHP

    对很多人而言,配置Nginx+PHP无外乎就是搜索一篇教程,然后拷贝粘贴.听上去似乎也没什么问题,可惜实际上网络上很多资料本身年久失修,漏洞百出,如果大家不求甚解,一味的拷贝粘贴,早晚有一天会为此付出 ...

  9. centos 7.0 编译安装php 7.0.3

    php下载页面 http://cn2.php.net/downloads.php 7.0.3多地区下载页面 http://cn2.php.net/get/php-7.0.3.tar.gz/from/a ...

  10. PHP常用函数整理

    推荐网址:http://php.net/manual/zh/http://www.w3cschool.cc/php/php-ref-array.html 错误报告: error_reporting(E ...