当前位置： 首页 > news >正文

JavaScript 事件流

news 2026/2/2 5:58:53
JavaScript与HTML之间的交互是通过事件实现的，而用户与浏览器页面的互动也是通过事件来实现的事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，所以分为两种事件，一是发生在 浏览器对象（BOM）上的事件，一是发生在 文档对象（DOM）上的事件。
浏览器规定了两种事件流模型： 捕获型事件流 和 冒泡型事件流 。
页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流。
在实际中，事件流包括了三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，当点击一个div元素时，以下就是事件流的顺序：
1. 顶级对象（window）接收到click事件，然后逐级向下捕获
2. 目标元素（div）接收到到事件
3. 对事件做出响应，逐级向上冒泡到顶级对象。
事件冒泡是目标元素接受事件，然后逐级向上传播到顶级元素为止。 
<!DOCTYPE html>
<html>
<head></head>
<body><div>click me</div>
</body>
</html>

点击div元素，click事件会沿着DOM树向上传播，在每一级节点都会发生，冒泡顺序为：div -> body -> html -> document。

事件捕获与事件冒泡是相反的，是顶级元素先接收到事件，再逐级向下传播到目标元素为止
同样是以上示例，document对象会先接收到click事件，然后沿着DOM树向下传播到事件的目标元素，捕获顺序为：document -> html -> body -> div，浏览器都是从window对象开始捕获的。

相关文章：

JavaScript 事件流

JavaScript与HTML之间的交互是通过事件实现的&#xff0c;而用户与浏览器页面的互动也是通过事件来实现的事件就是文档或浏览器窗口中发生的一些特定的交互瞬间&#xff0c;所以分为两种事件&#xff0c;一是发生在 浏览器对象&#xff08;BOM&#xff09;上的事件&#xff0c;…...

编程日记 2024/4/6 18:44:16

HTML——5.表单、框架、颜色

一、表单 HTML 表单用于在网页中收集用户输入的数据&#xff0c;例如登录信息、搜索查询等。HTML 提供了一系列的表单元素&#xff0c;允许用户输入文本、选择选项、提交数据等。 <!DOCTYPE html> <html lang"en"> <head> <meta charset&q…...

编程日记 2024/4/6 18:43:16

Docker、Kubernetes之间的区别

比较容器化工具&#xff1a;了解 Docker、Kubernetes 在应用程序部署和管理方面的差异。 基本概述 Docker 是一个流行的容器化平台&#xff0c;允许开发人员在容器中创建、部署和运行应用程序。 Docker 提供了一组工具和 API&#xff0c;使开发人员能够构建和管理容器化应用程…...

编程日记 2024/4/6 18:42:13

【21-40】计算机网络基础知识（非常详细）从零基础入门到精通，看完这一篇就够了

【21-40】计算机网络基础知识&#xff08;非常详细&#xff09;从零基础入门到精通&#xff0c;看完这一篇就够了 以下是本文参考的资料 欢迎大家查收原版 本版本仅作个人笔记使用21、HTTPS是如何保证数据传输的安全&#xff0c;整体的流程是什么&#xff1f;&#xff08;SSL是…...

编程日记 2024/4/6 18:40:12

软考111-上午题-【计算机网络】-URL和DNS

一、URL解析 org&#xff1a;各类组织结构&#xff08;非盈利团队&#xff09; 1-1、顶级域 顶级域名是域名的最后一个部分&#xff0c;即是域名最后一点之后的字母&#xff0c;例如&#xff1a;www.baidu.com这个域名中&#xff0c;顶级域是.com&#xff08;或.COM&#xff…...

编程日记 2024/4/6 18:39:11

EasyCVR视频汇聚平台海康Ehome2.0与5.0设备接入时的配置区别

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2024/4/6 18:35:08

echarts实现炫酷科技感的流光效果

前言&#xff1a; echarts实现炫酷科技感的流光效果 效果图&#xff1a; 实现步骤&#xff1a; 1、引入echarts,直接安装或者cdn引入 npm i echarts https://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js 2、封装 option方法&#xff0c;第一个数据是折线数据&a…...

编程日记 2024/4/6 18:34:06

从多模态生物图数据中学习Gene的编码-MuSeGNN

由于数据的异质性&#xff0c;在不同的生物医学背景下发现具有相似功能的基因对基因表示学习提出了重大挑战。在本研究中&#xff0c;作者通过引入一种称为多模态相似性学习图神经网络的新模型来解决这个问题&#xff0c;该模型结合了多模态机器学习和深度图神经网络&#xff0…...

编程日记 2024/4/6 18:33:05

Redis Desktop Manager可视化工具

可视化工具 Redis https://www.alipan.com/s/uHSbg14XmsL 提取码: 38cl 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视频原画倍速播放。 官网下载&#xff08;不推荐&#xff09;&#xff1a;http…...

编程日记 2024/4/6 18:31:02

ARM汇编与逆向工程：揭秘程序背后的神秘世界

文章目录 一、ARM汇编语言&#xff1a;底层世界的密码二、逆向工程&#xff1a;软件世界的侦探工作三、ARM汇编与逆向工程的完美结合四、ARM汇编逆向工程的风险与挑战五、ARM汇编逆向工程的未来展望《ARM汇编与逆向工程　蓝狐卷 基础知识》内容简介作者简介译者简介ChaMd5安全团…...

编程日记 2024/4/6 18:29:00

idea使用docker将Java项目生成镜像并使用

1&#xff1a;开启docker 远程访问 使用 vim 编辑docker服务配置文件 vim /lib/systemd/system/docker.service [Service] Typenotify # the default is not to use systemd for cgroups because the delegate issues still # exists and systemd currently does not suppor…...

编程日记 2024/4/6 18:26:57

clickhouse sql使用2

1、多条件选择 multiIf(cond_1, then_1, cond_2, then_2, …, else) select multiIf(true,0,1) 当第一条件不成立看第二条件判断 第一个参数条件参数&#xff0c;第二参数条件成立时走 2、clickhouse 在计算时候长出现NaN和Infinity异常处理 isNaN()和isInfinite()处理...

编程日记 2024/4/6 18:23:54

jrebel

JRebel最新版&#xff08;2024.1.2&#xff09;在线激活_jrebel 激活 2024-CSDN博客 JRebelXRebel热部署插件激活支持IDEA2023.1_jrebel and xrebel 激活-CSDN博客...

编程日记 2024/4/6 18:20:51

【单片机家电产品学习记录--红外线】

单片机家电产品学习记录–红外线 红外手势驱动电路&#xff0c;&#xff08;手势控制的LED灯&#xff09; 原理 通过红外线对管&#xff0c;IC搭建的电路&#xff0c;实现灯模式转换。 手势控制灯模式转换&#xff0c;详细说明 转载 1《三色调光LED台灯电路》&#xff0c…...

编程日记 2024/4/6 18:19:49

Java入门教程||Java Applet基础

Java Applet基础 applet是一种Java程序。它一般运行在支持Java的Web浏览器内。因为它有完整的Java API支持,所以applet是一个全功能的Java应用程序。 如下所示是独立的Java应用程序和applet程序之间重要的不同&#xff1a; Java中applet类继承了 java.applet.Applet类Applet…...

编程日记 2024/4/6 18:17:47

Python可视化概率统计和聚类学习分析生物指纹

&#x1f3af;要点 &#x1f3af;使用Jupyter Notebook执行Dash 应用&#xff0c;确定Dash输入输出&#xff0c;设计回调函数&#xff0c;Dash应用中包含函数。&#x1f3af;使用Plotly绘图工具&#xff1a;配置图对象选项&#xff0c;​将图转换为HTML、图像。使用数据集绘图…...

编程日记 2024/4/6 18:16:46

yolo v8 教程（不出5行代码让你学会）

Solving environment: failedPackagesNotFoundError: The following packages are not available from current channels:- python3.8https://github.com/ultralytics 下滑来到 先来介绍为什么写这篇博客&#xff0c; 一. 是我之前的yolov5的博客挺多人访问的&#xff0c;但是…...

编程日记 2024/4/6 18:14:44

MongoDB集合结构分析工具Variety

工具下载地址&#xff1a;GitHub - variety/variety: Variety: a MongoDB Schema Analyzer 对于Mongo这种结构松散的数据库来说&#xff0c;如果想探查某个集合的结构&#xff0c;通过其本身提供的功能很不方便&#xff0c;通过调研发现一个很轻便的工具--variety&#xff0c;…...

编程日记 2024/4/6 18:13:43

详解Qt中访问数据库

在Qt中访问数据库涉及到几个关键步骤&#xff0c;主要包括加载数据库驱动、建立数据库连接、执行SQL语句、读取结果等。下面将详细介绍这些步骤&#xff0c;并给出一个简单的示例&#xff0c;这里假设使用的是SQLite数据库。 记得首先在pro文件中添加QT sql 1. 加载数据库驱动…...

编程日记 2024/4/6 18:08:38

《QT实用小工具·三》偏3D风格的异型窗体

1、概述 源码放在文章末尾 可以在窗体中点击鼠标左键进行图片切换&#xff0c;项目提供了一些图片素材&#xff0c;整体风格偏向于3D类型&#xff0c;也可以根据需求自己放置不同的图片。 下面是demo演示&#xff1a; 项目部分代码如下所示&#xff1a; 头文件部分&#xff…...

编程日记 2024/4/6 18:03:33

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/1 6:20:05

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/1/25 20:49:59

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2026/1/29 9:12:46

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2026/1/28 23:51:31

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2026/1/28 9:22:13

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...

编程新知 2025/11/27 2:47:09

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

编程新知 2025/10/20 16:05:17