第一百零四篇: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 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的 ...
随机推荐
- CentOS创建vsftp进行读写操作的简单方法
1. 安装vsftpd yum install epel-release yum install vsftpd 2. 进入系统设置简单进行处理 注意 user_list 是不允许访问的列表. [roo ...
- js分钟转化为小时并且以某个数字进行递增
有些时候,我们需要将分钟转为小时: 并且还有以一个数字进行递增: 呈现出[3,6,9,12,15,18]这样的递增形式 // 因为是递增,所以是相加: // 在使用+号的时候: // 注意两边都是数字 ...
- 自动化部署实例（donetcore GitLab CICD ）
主要简单的介绍了一下 GitLab CI 的持续集成以及持续部署,这篇将通过 GitLab CI 发布一个 .net core 项目,来带小伙伴们感受一下自动化的魅力,从此告别手动发布. 准备工作 创 ...
- Gin 框架介绍与快速入门
Gin 框架介绍与快速入门 目录 Gin 框架介绍与快速入门 一.Gin框架介绍 1. 快速和轻量级 2. 路由和中间件 3. JSON解析 4. 支持插件 5. Gin相关文档 二.基本使用 1.安 ...
- DES加密和base64加密
DES简介:参考知乎 https://www.zhihu.com/question/36767829 和博客https://www.cnblogs.com/idreamo/p/9333753.html ...
- 【Spring】Bean装配类注解
默认注入类型 多个同类型Bean 注入失败 依赖 使用目标(@Target) @AutoWired 通过type 默认首先安装属性名称进行注入 结合@Qualifier注解(value属性)设置注入的 ...
- 超级AI助手：全新提升！中文NLP训练框架，快速上手，海量训练数据
"超级AI助手:全新提升!中文NLP训练框架,快速上手,海量训练数据,ChatGLM-v2.中文Bloom.Dolly_v2_3b助您实现更智能的应用!" 1.简介 目标:基于py ...
- 【6】VScode 无法在终端输入问题，提示：无法在只读编辑器中编辑
相关文章: [1]VScode中文界面方法-------超简单教程 [2]VScode搭建python和tensorflow环境 [3]VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色 [ ...
- django向数据库更新时间
1 今天的日期可以用下面的代码: 2 3 import datetime 4 5 today = datetime.date.today() 6 7 8 9 得到昨天的日期可以用: 10 11 yes ...
- Python 潮流周刊第 38 期（摘要）+赠书5本
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...