addEventListener-开始

前面零散地写了些关于 addEventListener 的内容,觉得比较散,有些地方可能也说得不够清楚明白,所以决定以连载的形式从头到尾再写一篇。

addEventListener 用于注册事件处理程序,IE 中为 attachEvent,我们为什么讲 addEventListener 而不讲 attachEvent 呢?一来 attachEvent 比较简单,二来 addEventListener 才是 DOM 中的标准内容。

简介

addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序,在以前我们一般是 <input type="button" onclick="...",或 document.getElementById("testButton").onclick = FuncName, 而在 DOM 中,我们用 addEventListener(IE 中用 attachEvent)。

语法

target.addEventListener(type, listener, useCapture);
  • target 文档节点、document、window 或 XMLHttpRequest。
  • type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
  • listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
  • useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false。

示例

function Go() {     //... }
document.getElementById("testButton").addEventListener("click", Go, false);

或者 listener 直接就是函数

document.getElementById("testButton").addEventListener("click", function () { ... }, false);

addEventListener-事件流

说到 addEventListener 不得不说到事件流,先说事件流对后面的解释比较方便。

当一个事件发生时,分为三个阶段:

捕获阶段 从根节点开始顺序而下,检测每个节点是否注册了事件处理程序。如果注册了事件处理程序,并且 useCapture 为 true,则调用该事件处理程序。(IE 中无此阶段。)

目标阶段 触发在目标对象本身注册的事件处理程序,也称正常事件派发阶段。

冒泡阶段 从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且 useCapture 为 false,则调用该事件处理程序。

举例

<div id="div1">   <div id="div2">     <div id="div3">       <div id="div4">       </div>     </div>   </div> </div>

如果在 d3 上点击鼠标,事件流是这样的:

捕获阶段 在 div1 处检测是否有 useCapture 为 true 的事件处理程序,若有,则执行该程序,然后再同样地处理 div2。

目标阶段 在 div3 处,发现 div3 就是鼠标点击的节点,所以这里为目标阶段,若有事件处理程序,则执行该程序,这里不论 useCapture 为 true 还是 false。

冒泡阶段 在 div2 处检测是否有 useCapture 为 false 的事件处理程序,若有,则执行该程序,然后再同样地处理 div1。

注意,上述捕获阶段和冒泡阶段中,实际上 div1 之上还应该有结点,比如有 body,但这里不讨论。

addEventListener-第三个参数 useCapture

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。

<div id="outDiv">   <div id="middleDiv">     <div id="inDiv">请在此点击鼠标。</div>   </div> </div>
<div id="info"></div>
var outDiv = document.getElementById("outDiv"); var middleDiv = document.getElementById("middleDiv"); var inDiv = document.getElementById("inDiv"); var info = document.getElementById("info");   outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false); middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false); inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我们测试的代码,根据 info 的显示来确定触发的顺序,有三个 addEventListener,而 useCapture 可选值为 true 和 false,所以 2*2*2,可以得出 8 段不同的程序。

  • 全为 false 时,触发顺序为:inDiv、middleDiv、outDiv;
  • 全为 true 时,触发顺序为:outDiv、middleDiv、inDiv;
  • outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;
  • middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;
  • ……

最终得出如下结论:

  • true 的触发顺序总是在 false 之前;
  • 如果多个均为 true,则外层的触发先于内层;
  • 如果多个均为 false,则内层的触发先于外层。

javascript中标准事件流addEventListener介绍的更多相关文章

  1. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  2. JavaScript 中的事件流和事件处理程序(读书笔记思维导图)

    JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...

  3. 理解JavaScript中的事件流

    原文地址:http://my.oschina.net/sevenhdu/blog/332014 目录[-] 事件冒泡 事件捕获 DOM事件流 当浏览器发展到第四代时(IE4和Netscape Comm ...

  4. 学习javascript中的事件——事件流

    事件概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道 ...

  5. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

  6. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  7. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  8. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  9. 再次理解javascript中的事件

    一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 +    事件冒泡接收事件的顺序:

随机推荐

  1. C#第七节课

    for嵌套 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System ...

  2. 单行函数、表连接(day02)

    回顾: 1.数据库介绍 sql: dql: select dml: insert delete update ddl: create drop alter tcl: commit rollback s ...

  3. request.getScheme()、 request.getServerName() 、 request.getServerPort() 、 request.getContextPath()

    <% String basePath = request.getScheme() + "://" + request.getServerName() + ":&qu ...

  4. 06.系统编程-3.进程VS线程比较

    1.定义的不同 ==进程是系统进行资源分配和调度的一个独立单位.== ==线程是进程的一个实体,是CPU调度和分派的基本单位==,它是比进程更小的能独立运行的基本单位.线程自己基本上不拥有系统资源,只 ...

  5. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  6. CentOS7安装Kubernetes

    CentOS7安装Kubernetes 安装Kubernetes时候需要一台机器作为管理机器,1台或者多台机器作为集群中的节点. 系统信息: Hosts: 请将IP地址换成自己环境的地址. cento ...

  7. AtCoder ARC 076D - Built?

    传送门:http://arc076.contest.atcoder.jp/tasks/arc076_b 本题是一个图论问题——Manhattan距离最小生成树(MST). 在一个平面网格上有n个格点, ...

  8. 对Django框架中Cookie的简单理解

    概念的理解:首先Cookie和Session一样,是django中用于视图保持状态的方案之一.为什么要进行视图保留呢,这是因为浏览器在向服务器发出请求时,服务器不会像人一样,有记忆,服务器像鱼一样,在 ...

  9. EXTJS之Ext.util.Observable自定义事件

    暂时还不会用Ext.mixin.Observable, 催悲的测试了近两个小时.这TMD的语法差距也太大了啊.. 在新版EXTJS里,已去除了addEvents. 弄个出来,大概知道下吧. <! ...

  10. [bzoj1606][Usaco2008 Dec]Hay For Sale 购买干草_动态规划_背包dp

    Hay For Sale 购买干草 bzoj-1606 Usaco-2008 Dec 题目大意:约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛.他乘着容量为C(1≤C≤50000)个单 ...