该文章已转移到博客: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. 解决pip安装过慢的问题

    1.pip install scipy -i https://pypi.douban.com/simple/ 2.pip install --index https://pypi.mirrors.us ...

  2. 【python之路42】web框架们的具体用法

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

  3. 使用 WPF 生成图形

    下载代码示例 基于一组与测试有关的数据来生成图形是一项常见的软件开发任务.根据我的经验,最常用的方法是将数据导入 Excel 电子表格,然后使用 Excel 内置的绘图功能手动生成图形.这种做法适用于 ...

  4. jeecms内容管理系统使用了哪些技术

    jeeecms作为国内Java开源内容管理系统的龙头老大(感谢jeecms研发小组的辛苦劳作),技术架构也是比较成熟的,当然涉及到的技术也就相对多一些 看看jeecms内容管理系统使用了哪些技术 we ...

  5. eclipse 代码格式化快捷键CTRL SHIFT F无反应的解决办法

    基本上就是被其他软件占用了,比如输入法的简繁体切换,改其他软件,保留eclipse就好

  6. 你应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单. 说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与 ...

  7. 日志lombok插件安装及配置

    安装lombok插件 下载Lombok.jar http://projectlombok.googlecode.com/files/lombok.jar 运行Lombok.jar java -jar ...

  8. tomcat的三种部署项目的方式

    1.直接将项目放在webapps目录下. 如果将项目直接打成WAR包,放在webapps目录下会自动解压 项目的文件夹名称就是项目的访问路径,也就是虚拟目录. 2.配置conf文件夹下的server. ...

  9. day38 07-Spring框架Bean的时候方式

    Spring是自动帮我们创建对象的,有几种创建Bean的方式呢? 构造方法实例化:(默认无参数)其实就是反射new Instance(). 静态工厂实例化: 实例工厂实例化: 一般不会改变它实例化的方 ...

  10. VI/VIM编辑器快捷键

    常用快捷键: Ctrl+f        向下翻页 Ctrl+b       向上翻页 G                移动到文件最后一行 gg              移动到文件第一行 N+回车 ...