[已转移]JavaScript事件---DOM事件流
该文章已转移到博客: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事件流的更多相关文章
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- 前端笔记之JavaScript(十)深入JavaScript节点&DOM&事件
一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript ...
- 【总结整理】JavaScript的DOM事件学习(慕课网)
事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...
- 前端JavaScript之DOM事件操作
DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...
- javascript:理解DOM事件
首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. 标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...
- javascript将DOM事件处理程序封装为event.js 出现的低级错误记录
将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...
- 松软科技web教程:JavaScript HTML DOM 事件监听器
addEventListener() 方法 实例 添加当用户点击按钮时触发的事件监听器: document.getElementById("myBtn").addEventList ...
- JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
- javascript避免dom事件重复触发
/** * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景 * @param {String} domID 要 ...
随机推荐
- flex 手册摘要
个人学习 摘抄翻译 http://www.cs.princeton.edu/~appel/modern/c/software/flex/flex.html#SEC1 程序的格式 分成显示的三部分 由% ...
- 新的开始 | Arthas GitHub Star 破万后的回顾和展望
一切新的开始,都始于一个里程碑. 2月20日上午,Java 开源诊断工具 Arthas 的 GitHub Star 突破10000,距离开源后的第一个Release 版发布仅 147 天. 从中,我们 ...
- 1.Js 点击控件区域之外隐藏控件
1.限制对象可以是 div 或者from 2.添加calss =stopProhide 3.需要添加jquery 类库 示例: $("#form_Query").click(fun ...
- LUOGU P4095 [HEOI2013]Eden 的新背包问题
题目描述 " 寄 没 有 地 址 的 信 ,这 样 的 情 绪 有 种 距 离 ,你 放 着 谁 的 歌 曲 ,是 怎 样 的 心 情 . 能 不 能 说 给 我 听 ." 失忆的 ...
- beego 入门 - 常见错误
参考网址:http://beego.me/quickstart 按照官网教程,执行命令 $ go get github.com/astaxie/beego $ go get github.com/be ...
- View的滑动冲突和解决方案
1.滑动冲突原因: 当有内外两层View同时可以滑动的时候,这个时候就会产生滑动冲突. 2.常见的冲突场景: 场景1: 场景2: 场景3: 4.解决方法种类: (1)外部拦截法: 针对场景1,我们可以 ...
- PHP获取搜索引擎关键词
有时候我们需要知道用户通过哪个搜索引擎,通过拿个关键词访问我们页面,当然js也可以实现,这里介绍下php的实现代码,包含(百度.谷歌.雅虎.搜狗.搜搜.必应.有道)几大搜索引擎的获取方法. //获取来 ...
- jQuery 源码解析(二十九) 样式操作模块 尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
- SpringBoot集成lombook让代码更简洁
1)添加lombok依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>l ...
- grpc安装
整个过程就是: 1.客户端 发送 数据(以字节流的方式) 2.服务端接收,并解析. 根据 约定 知道要知道执行什么.然后把结果返回客户端 RPC就是 把 1.上述过程封装下,使其操作更加优化 2.使用 ...