第一百零四篇:DOM事件流
好家伙,JS基础接着学,
1.事件流
页面哪个部分拥有特定的事件?
可以把页面想象成一个同心圆,
当你戳了其中的一点,其实你同时戳中了很多个圆
当你点击一个页面中的按钮,实际上你同时点击了这个按钮,这个按钮的容器,以及整个页面
于是有了这么个概念,事件流,
我们用事件流描述页面接受事件的顺序,
举个栗子:
来写一个简单页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>vuetest</title>
</head>
<body> <div id="app">赞</div> </body>
</html>
它的大致层级:
第一层 --Document
第二层 ----<html>
第三层 ----<body>
第四层 ----<div>
这个时候,有个靓仔点了一下页面中的"赞"
然后,有人为了争论"点击事件"发生顺序开始吵架了,他们是"事件冒泡"和"事件捕获"
1.1.事件冒泡
IE事件被称为事件冒泡,事件被定义为从最具体的元素(DOM树中最深节点)开始触发,然后向上传播至没有那么具体的元素(文档)
"事件冒泡"说:你是点中"赞"然后点中整个页面
所以事件冒泡认为你的事件触发顺序是
<div> --><body> --><html> -->Document
1.2.事件捕获
事件捕获的意思是最不具体的节点应该最先受到事件,而最具体的节点应该最后收到事件
"事件捕获"说:你点中的是整个页面中的"赞",你是先点中整个页面,再点中"赞
所以事件捕获认为你的事件触发顺序是:
Document --> <html> --> <body> --> <div>
"事件冒泡"和""事件捕获"因为想法完全相反而吵起来了
2.DOM事件流
事件流,可以简单的理解为事件的执行顺序
事件流,认为"事件冒泡"和""事件捕获"的想法都很好,于是整合他们的想法
DOM2 Events 规范规定事件流分为3个阶段：事件捕获、到达目标和事件冒泡。事件捕获最先发生，为提前拦截事件提供了可能。
然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个阶段响应事件。
仍以前面那个简单的HTML为例，点击＜div＞元素会以如图所示的顺序触发事件。
---图片来自JS高级程序设计
事件流的三个阶段;
在DOM事件流中，实际的目标（＜div＞元素）在捕获阶段不会接收到事件。这是因为捕获阶段从document 到＜html＞再到＜body＞就结束了。
下一阶段，即会在＜div＞元素上触发事件的“到达目标”阶段，通常在事件处理时被认为是冒泡阶段的一部分。然后，冒泡阶段开始，事件反向传播至文档。
大多数支持DOM事件流的浏览器实现了一个小小的拓展。虽然DOM2 Events 规范明确捕获阶段不命中事件目标，但现代浏览器都会在捕获阶段在事件目标上触发事件。最终结果是在事件目标上有两个机会来处理事件。
最后再来试试
<!DOCTYPE html>
<html lang="en">
<head>
<title>vuetest</title>
</head>
<body> <div id="app" onclick="console.log(11111111)"><h1>副歌魏武实</h1>
<div onclick="console.log(2222222222)"><h1>赞</h1></div>
</div> </body>
</html>
让我们点一下赞
看来是事件冒泡了,看不到事件捕获
第一百零四篇:DOM事件流的更多相关文章
- “全栈2019”Java第一百零四章：匿名内部类与外部成员互访详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 第一百零六篇:变量的不同声明(var,let和const的不同)
好家伙,JS基础接着学, 本篇内容为<JS高级程序设计>第三章学习笔记 1.变量 ECMAScript 变量是松散类型的,意思是变量可以用于保存任何类型的数据. (确实松散,不像C或C++ ...
- 第一百零四节，JavaScript时间与日期
JavaScript时间与日期 学习要点: 1.Date类型 2.通用的方法 3.格式化方法 4.组件方法 ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期 ...
- 第一百零七篇:基本数据类型(undefined,null,boolean类型)
好家伙, 本篇内容为<JS高级程序设计>第三章学习笔记 1.数据类型 ECMAScript有6种简单数据类型(称为原始类型): Undefined, Null, Boolean, Numb ...
- leecode第一百零四题（二叉树的最大深度）
/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...
- “全栈2019”Java第一百零三章：匿名内部类详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- [DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
- 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...
- Dom事件流、冒泡、捕获
Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...
- 漫谈DOM 事件流的三个阶段
一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的 ...
随机推荐
- [转帖]RPC 框架架构设计
github地址:https://github.com/xiaojiesir/mini-rpc RPC 又称远程过程调用(Remote Procedure Call),用于解决分布式系统中服务之间的调 ...
- Windows 环境下简单的自动备份以及清理数据库的操作过程
今天能想到要简单的备份一下windows上面的数据库. 然后并且能够定期清理文件. 然后从网上找了一下 找到把饭如下 1. 备份 创建一个目录用来存放数据库备份 c:\dbbak 然后编写一个脚本, ...
- 冷备PG数据库并且直接使用Docker运行的方法
PG数据库冷备以及使用Docker恢复运行的方法 总结: Docker运行命令 docker run -d --name postgres5433 --restart always -e POSTGR ...
- 记录TritonServer部署多模型到多GPU踩坑 | 京东云技术团队
一.问题是怎么发现的 部署chatglm2和llama2到一个4*V100的GPU机器上遇到问题 config.pbtxt 中设置模型分别在指定gpu上部署实例配置不生效 如以下配置为在gpu0上部署 ...
- 文盘Rust -- 领域交互模式如何实现
作者:京东科技 贾世闻 文盘Rust -- 领域交互模式如何实现 书接上文,上回说到如何通过interactcli-rs四步实现一个命令行程序.但是shell交互模式在有些场景下用户体验并不是很好.比 ...
- Bitmap、RoaringBitmap原理分析
作者:京东科技 曹留界 在人群本地化实践中我们介绍了人群ID中所有的pin的偏移量可以通过Bitmap存储,而Bitmap所占用的空间大小只与偏移量的最大值有关系.假如现在要向Bitmap内存入两个p ...
- flex 布局子元素被挤压的问题
Flex 意为 "弹性布局",是一种在开发静态页面过程中常用的布局模式. 开发购物车使用flex布局的时候遇到的一种场景:子元素被挤压 具体如图所示, 当商品名称超出两行文字时显示 ...
- 从零开始配置vim(24)——自动补全
neovim 自带的代码补全的效果并不好,而且它分为好多类,如果需要人为的去判断使用路径补全.使用当前buffer中的单词补全.亦或者使用include 来进行补全,那样使用起来就很不方便了.针对代码 ...
- logstash 与ElasticSearch：从CSV文件到搜索宝库的导入指南
logstash 与ElasticSearch:从CSV文件到搜索宝库的导入指南 使用 logstash 导入数据到 ES 时,由三个步骤组成:input.filter.output.整个导入过程可视 ...
- 创建大量栅格文件并分别写入像元数据：C++ GDAL代码实现
本文介绍基于C++语言GDAL库,批量创建大量栅格遥感影像文件,并将数据批量写入其中的方法. 首先,我们来明确一下本文所需实现的需求.已知我们对大量遥感影像进行了批量读取与数据处理操作--具体 ...