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

什么是事件冒泡和事件捕获

文章目录

    • 1. 事件传播机制
    • 2. 事件冒泡(Event Bubbling)
    • 3. 事件捕获(Event Capturing)
    • 4. 事件冒泡和事件捕获的区别
    • 5. 阻止事件传播
    • 总结

事件冒泡和事件捕获是两种处理网页中事件传播的机制,特别是在 JavaScript 中处理 DOM 事件时,它们决定了事件如何从一个元素传播到另一个元素。

1. 事件传播机制

事件传播指的是,当某个 DOM 元素触发事件时,这个事件会在父元素和子元素之间传播。事件传播分为三个阶段:

捕获阶段:事件从文档的根元素(document)开始,逐级向下传播到目标元素
目标阶段:事件到达目标元素,并在该元素上触发。
冒泡阶段:事件从目标元素逐级向上传播直到文档的根元素

2. 事件冒泡(Event Bubbling)

事件冒泡指的是事件从目标元素逐级向上传播到父级元素直到根元素的过程。它是事件传播的默认行为。在这个阶段,如果目标元素的事件被触发,其父级、祖父级等元素上的同类型事件处理器也会被依次触发

示例: 假设有以下 HTML 结构:

<div id="parent"><button id="child">Click me</button>
</div>

如果你给按钮元素(#child)绑定一个点击事件,同时给它的父元素(#parent)也绑定了一个点击事件,那么当你点击按钮时,事件会首先在按钮上触发,然后会冒泡到父元素(#parent)上,触发它的点击事件。

document.getElementById('parent').addEventListener('click', () => {console.log('Parent clicked');
});document.getElementById('child').addEventListener('click', () => {console.log('Child clicked');
});

打印结果:

Child clicked
Parent clicked

3. 事件捕获(Event Capturing)

事件捕获指的是事件从根元素逐级向下传播到目标元素的过程。在这个阶段,事件首先会从文档的最外层元素开始捕获,然后逐级向下到目标元素

默认情况下,事件处理程序是在事件冒泡阶段触发的,但你可以通过在addEventListener中将第三个参数设置为true,将事件处理器绑定到捕获阶段

document.getElementById('parent').addEventListener('click', () => {console.log('Parent clicked');
}, true);document.getElementById('child').addEventListener('click', () => {console.log('Child clicked');
}, true);

在捕获阶段,点击按钮会打印:

Parent clicked
Child clicked

4. 事件冒泡和事件捕获的区别

事件冒泡:事件从目标元素向上传播先触发目标元素上的事件,再触发父元素上的事件
事件捕获:事件从根元素向下传播先触发父元素上的事件再触发目标元素上的事件

5. 阻止事件传播

在 JavaScript 中,你可以使用stopPropagation()方法来阻止事件的进一步传播,不论是冒泡还是捕获阶段。

document.getElementById('child').addEventListener('click', (event) => {event.stopPropagation();  // 阻止事件继续传播console.log('Child clicked');
});

这样,点击按钮后,Parent clicked不会被打印,因为事件在按钮元素被阻止了。

总结

事件冒泡:事件从目标元素向上传播到其祖先元素
事件捕获:事件从祖先元素向下传播到目标元素
默认行为:事件冒泡是默认的,事件捕获需要明确启用

相关文章:

什么是事件冒泡和事件捕获

文章目录 1. 事件传播机制2. 事件冒泡&#xff08;Event Bubbling&#xff09;3. 事件捕获&#xff08;Event Capturing&#xff09;4. 事件冒泡和事件捕获的区别5. 阻止事件传播总结 事件冒泡和事件捕获是两种处理网页中事件传播的机制&#xff0c;特别是在 JavaScript 中处理…...

高端优质建站公司具备哪些优势?2024高端建站公司哪家好

从某种程度上讲&#xff0c;一个出色的建站公司需具备将无形的品牌价值巧妙转化为直观视觉元素的能力&#xff0c;这一转化过程极为考究&#xff0c;涵盖了设计的精细程度、色彩运用的巧妙以及空间布局的智慧&#xff0c;这些要素均不容忽视。 接下来考察网站的内容策划能力同…...

word删除空白页 | 亲测有效

想要删掉word里面的末尾空白页&#xff0c;但是按了delete之后也没有用 找了很久找到了以下亲测有效的方法 1. 通过鼠标右键在要删除的空白页面处显示段落标记 2. 在字号输入01&#xff0c;按ENTER&#xff08;回车键&#xff09; 3.成功删除了&#xff01;&#xff01;...

YashanDB学习-服务启停

YashanDB学习-服务启停 1、查看YashanDB 当前实例状态和数据库名称2、使用 yasboot 工具启停YashanDB3、服务器重启后无法通过yasboot命令运维管理数据库4、正常关闭数据库的方式 数据库安装过程中将实例自动切换成OPEN阶段&#xff0c;并创建名为yashandb的数据库。 1、查看Ya…...

在未排序的整数数组找到最小的缺失正整数

&#x1f381;&#x1f449;点击进入文心快码 Baidu Comate 官网&#xff0c;体验智能编码之旅&#xff0c;还有超多福利&#xff01;&#x1f381; &#x1f50d;【大厂面试真题】系列&#xff0c;带你攻克大厂面试真题&#xff0c;秒变offer收割机&#xff01; ❓今日问题&am…...

TCP连接管理机制:三次握手四次挥手

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;Linux从入门到进阶 欢迎大家点赞收藏评论&#x1f60a; 目录 连接管理机制三次握手三次握手的目的三次握手的步骤第一次握手第二次握手第三次握手注意&#xff1a; 为什么建立连接是三次握手&…...

1022. 宠物小精灵之收服

思路 双层dp 代码 #include <bits/stdc.h> using namespace std;const int N 1010, mod 1e9 7;int n, m, k, x, y, z, ans, t; int w[N], f[N][N];void solve() {cin >> n >> m >> k;for (int i 1; i < k; i ){cin >> x >> y;f…...

人工智能生成内容(AI-Generated Content)

此外&#xff0c;ALGC还在影视剧本创作、音乐创作、设计与创意、虚拟助手与聊天机器人、教育与培训、新闻报道与文学创作等领域发挥着重要作用。 三、技术架构 ALGC产业生态体系通常呈现为上中下三层架构&#xff1a; 四、优势与挑战 优势&#xff1a; 挑战&#xff1a; 一、…...

深度学习:强化学习(Reinforcement Learning, RL)详解

强化学习&#xff08;Reinforcement Learning, RL&#xff09;详解 强化学习是机器学习的一个重要分支&#xff0c;它涉及到智能体&#xff08;agent&#xff09;通过与环境&#xff08;environment&#xff09;的交互学习如何做出决策。在强化学习中&#xff0c;智能体在不断…...

C语言笔记20

指针运算 #include <stdio.h>int main() {char ac[] {0,1,2,3,4,5,6,7,8,9,};char *p ac;printf("p %p\n", p);printf("p1%p\n", p1);int ai[] {0,1,2,3,4,5,6,7,8,9,};int *q ai;printf("q %p\n", q);printf("q1%p\n", q1)…...

基于SSM+微信小程序的房屋租赁管理系统(房屋2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的房屋租赁管理系统实现了有管理员、中介和用户。 1、管理员功能有&#xff0c;个人中心&#xff0c;用户管理&#xff0c;中介管理&#xff0c;房屋信息管理&#xff…...

selenium案例——爬取哔哩哔哩排行榜

案例需求&#xff1a; 1.使用selenium自动化爬虫爬取哔哩哔哩排行榜中舞蹈类的数据&#xff08;包括视频标题、up主、播放量和评论量&#xff09; 2.利用bs4进行数据解析和提取 3.将爬取的数据保存在本地json文件中 4.保存在excel文件中 分析&#xff1a; 1.请求url地址&…...

HTML5教程(三)- 常用标签

1 文本标签-h 标题标签&#xff08;head&#xff09;&#xff1a; 自带加粗效果&#xff0c;从h1到h6字体大小逐级递减一个标题独占一行 语法 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5…...

【HCIE-Datacom考试战报】2024-08-21 深圳 SRv6

8月21日深圳考试战报&#xff08;SRV6&#xff09; 前言 大家好呀&#xff0c;我是来自誉天的学员---&#xff0c;我是今年4月份开始看集训、备考实验的&#xff0c;但是专业课比较多&#xff0c;又还有其他比赛&#xff0c;所以我刚开始的进度很慢&#xff0c;六月底才进入冲…...

【京准电钟】“安全卫士”:卫星时空安全隔离防护装置

【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 【京准电钟】“安全卫士”&#xff1a;卫星时空安全隔离防护装置 当前&#xff0c;我国电力系统普遍采用北斗卫星或者GPS卫星授时来实现时间同步&#xff0c;但不加防护的授时装置存在卫星信号被干扰或欺骗的风险…...

优先级队列(2)_数据流中第k大元素

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 优先级队列(2)_数据流中第k大元素 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目…...

【CSS】纯CSS Loading动画组件

<template><div class"ai-loader-box"><!-- AI loader --><div class"ai-loader"><div class"text"><p>AI智能分析中....</p></div><div class"horizontal"><div class&quo…...

rootless模式下istio ambient鉴权策略

环境说明 rootless模式下测试istio Ambient功能 四层鉴权策略 这里四层指的是网络通信模型的第四层&#xff0c;主要的传输协议为TCP和UDP。 用于限制服务间的通信&#xff0c;比如下面的策略应用于带有 app: productpage 标签的 Pod&#xff0c; 并且仅允许来自服务帐户 clus…...

超详细的总结!最新大模型算法岗面试题(含答案)来了!

大模型应该是目前当之无愧的最有影响力的AI技术&#xff0c;它正在革新各个行业&#xff0c;包括自然语言处理、机器翻译、内容创作和客户服务等&#xff0c;正成为未来商业环境的重要组成部分。 截至目前大模型已超过200个&#xff0c;在大模型纵横的时代&#xff0c;不仅大模…...

vmware-17pro全网最细安装教程(图文讲解,不需注册账户)

文章目录 一、下载安装包&#xff1a; 二、安装教程&#xff1a; 三、检查是否安装成功 四、许可证密匙 vmware安装教程 一、下载安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1yC610SU1-O9Jtk7nUrZuSA?pwdsKBy 提取码&#xff1a;sKBy 二、安装教程&…...

Wan2.2-I2V-A14B效果展示:水墨风、赛博朋克、胶片质感视频样例

Wan2.2-I2V-A14B效果展示&#xff1a;水墨风、赛博朋克、胶片质感视频样例 1. 惊艳的视频生成能力 Wan2.2-I2V-A14B文生视频模型展现了令人惊叹的创作能力&#xff0c;能够根据简单的文字描述生成高质量、风格多样的视频内容。这款专为RTX 4090D 24GB显存优化的私有部署镜像&…...

Stable Diffusion v1.5功能体验:Guidance Scale参数实测,教你调出最佳效果

Stable Diffusion v1.5功能体验&#xff1a;Guidance Scale参数实测&#xff0c;教你调出最佳效果 1. 引言&#xff1a;为什么Guidance Scale如此重要&#xff1f; 如果你用过Stable Diffusion生成图片&#xff0c;一定遇到过这样的情况&#xff1a;同样的提示词&#xff0c;…...

5分钟掌握ViGEmBus:Windows虚拟手柄驱动的完整指南

5分钟掌握ViGEmBus&#xff1a;Windows虚拟手柄驱动的完整指南 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus ViGEmBus是一款专业的Windows内核级虚拟游戏手…...

OBS智能背景移除插件:无绿幕实时抠图与低光增强完整指南

OBS智能背景移除插件&#xff1a;无绿幕实时抠图与低光增强完整指南 【免费下载链接】obs-backgroundremoval An OBS plugin for removing background in portrait images (video), making it easy to replace the background when recording or streaming. 项目地址: https:…...

数据主权时代,企业即时通讯厂商选型推荐

BeeWorks作为企业级私有化 IM&#xff0c;主打安全可控、深度协同、信创适配&#xff0c;在政企、军工、金融等强合规场景口碑突出。BeeWorks 定位为安全专属数字化协作平台&#xff0c;核心是私有化部署 全链路安全 业务深度融合&#xff0c;区别于通用 SaaS IM。1. 核心架构…...

告别Node版本混乱!用NVM管理多项目环境(Mac保姆级指南+Zsh配置)

告别Node版本混乱&#xff01;用NVM管理多项目环境&#xff08;Mac保姆级指南Zsh配置&#xff09; 在开发过程中&#xff0c;你是否遇到过这样的场景&#xff1a;接手一个老项目时&#xff0c;发现它依赖Node.js 12.x版本&#xff0c;而新项目却要求使用18.x甚至更高版本&#…...

Chandra AI企业知识管理方案:文档智能检索与摘要生成

Chandra AI企业知识管理方案&#xff1a;文档智能检索与摘要生成 1. 引言 企业每天都在产生海量文档——合同、报告、PPT、技术文档...这些宝贵的知识资产往往散落在各处&#xff0c;查找困难&#xff0c;利用率低。传统的关键词搜索就像在黑暗中摸索&#xff0c;找到的文档可…...

暗黑3按键助手:一键解放双手的终极游戏伴侣 [特殊字符]

暗黑3按键助手&#xff1a;一键解放双手的终极游戏伴侣 &#x1f3ae; 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 还在为暗黑3中复杂的技能连招和…...

QueryExcel:解放双手的Excel批量查询神器,告别Ctrl+F的繁琐时代

QueryExcel&#xff1a;解放双手的Excel批量查询神器&#xff0c;告别CtrlF的繁琐时代 【免费下载链接】QueryExcel 多Excel文件内容查询工具。 项目地址: https://gitcode.com/gh_mirrors/qu/QueryExcel 在日常工作中&#xff0c;你是否也曾被海量Excel文件中的数据查找…...

Phi-3-mini-4k-instruct-gguf步骤详解:supervisor服务管理与错误日志定位方法

Phi-3-mini-4k-instruct-gguf步骤详解&#xff1a;supervisor服务管理与错误日志定位方法 1. 模型概述 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本&#xff0c;特别适合问答、文本改写、摘要整理和简短创作等场景。这个开箱即用的解决方案已…...