该文章已转移到博客:https://cynthia0329.github.io/

事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件

这个传播过程即DOM事件流。

1、两种事件流模型

事件传播的顺序对应浏览器的两种事件流模型:捕获型事件流和冒泡型事件流。

冒泡型事件流:事件的传播是从最特定事件目标到最不特定的事件目标。即从DOM树的叶子到根。(由内向外)【推荐】

捕获型事件流:事件的传播是从最不特定事件目标到最特定的事件目标。即从DOM树的根到叶子。(由外向内)

事件捕获的思想就是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>

上面这段html代码中,单击了页面中的<div>元素,

在冒泡型事件流中click事件传播顺序为<div>—》<body>—》<html>—》document

在捕获型事件流中click事件传播顺序为document—》<html>—》<body>—》<div>

note:

  • 所有现代浏览器都支持事件冒泡,但在具体实现中略有差别:
    IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。
    IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
  • IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。
  • 由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡

2、DOM事件流

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象,从document对象开始,也在document对象结束。

DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。

  • 事件捕获阶段:实际目标(<div>)在捕获阶段不会接收事件。也就是在捕获阶段,事件从document到<html>再到<body>就停止了。上图中为1~3.
  • 处于目标阶段:事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分
  • 冒泡阶段:事件又传播回文档。

note:

  • 尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标,但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果,就是有两次机会在目标对象上面操作事件。
  • 并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。

原文:

https://www.cnblogs.com/starof/p/4066381.html

[已转移]JavaScript事件---DOM事件流的更多相关文章

  1. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  2. 前端笔记之JavaScript(十)深入JavaScript节点&DOM&事件

    一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...

  3. 【总结整理】JavaScript的DOM事件学习(慕课网)

    事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...

  4. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  5. javascript:理解DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...

  6. javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

    将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...

  7. 松软科技web教程:JavaScript HTML DOM 事件监听器

    addEventListener() 方法 实例 添加当用户点击按钮时触发的事件监听器: document.getElementById("myBtn").addEventList ...

  8. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  9. javascript避免dom事件重复触发

    /** * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景 * @param {String} domID 要 ...

随机推荐

  1. flex 手册摘要

    个人学习 摘抄翻译 http://www.cs.princeton.edu/~appel/modern/c/software/flex/flex.html#SEC1 程序的格式 分成显示的三部分 由% ...

  2. 新的开始 | Arthas GitHub Star 破万后的回顾和展望

    一切新的开始,都始于一个里程碑. 2月20日上午,Java 开源诊断工具 Arthas 的 GitHub Star 突破10000,距离开源后的第一个Release 版发布仅 147 天. 从中,我们 ...

  3. 1.Js 点击控件区域之外隐藏控件

    1.限制对象可以是 div 或者from 2.添加calss =stopProhide 3.需要添加jquery 类库 示例: $("#form_Query").click(fun ...

  4. LUOGU P4095 [HEOI2013]Eden 的新背包问题

    题目描述 " 寄 没 有 地 址 的 信 ,这 样 的 情 绪 有 种 距 离 ,你 放 着 谁 的 歌 曲 ,是 怎 样 的 心 情 . 能 不 能 说 给 我 听 ." 失忆的 ...

  5. beego 入门 - 常见错误

    参考网址:http://beego.me/quickstart 按照官网教程,执行命令 $ go get github.com/astaxie/beego $ go get github.com/be ...

  6. View的滑动冲突和解决方案

    1.滑动冲突原因: 当有内外两层View同时可以滑动的时候,这个时候就会产生滑动冲突. 2.常见的冲突场景: 场景1: 场景2: 场景3: 4.解决方法种类: (1)外部拦截法: 针对场景1,我们可以 ...

  7. PHP获取搜索引擎关键词

    有时候我们需要知道用户通过哪个搜索引擎,通过拿个关键词访问我们页面,当然js也可以实现,这里介绍下php的实现代码,包含(百度.谷歌.雅虎.搜狗.搜搜.必应.有道)几大搜索引擎的获取方法. //获取来 ...

  8. jQuery 源码解析(二十九) 样式操作模块 尺寸详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...

  9. SpringBoot集成lombook让代码更简洁

    1)添加lombok依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>l ...

  10. grpc安装

    整个过程就是: 1.客户端 发送 数据(以字节流的方式) 2.服务端接收,并解析. 根据 约定 知道要知道执行什么.然后把结果返回客户端 RPC就是 把 1.上述过程封装下,使其操作更加优化 2.使用 ...