day12 - DOM事件流、事件对象、事件委托、事件捕获和冒泡、事件代理

已于 2025-08-18 16:36:43 修改
阅读量14 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 阶段二：JavaScript编程 文章标签： javascript JavaScript事件 阻止冒泡和默认行为 事件冒泡和捕获 事件代理 事件委托 事件对象
于 2025-08-18 16:30:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010544438/article/details/150494964

1. DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子。document是最外面的大盒

子。当我们给页面中的一个div注册了单击事件，单击div时，也就单击了body，单击了html单击了

document。那么，多元素嵌套时，是先执行父元素的单击事件，还是先执行子元素的单击事件呢 ？

DOM事件流分为三部分：

事件冒泡，IE最早提出，事件开始时由最具体的元素接收然后逐级向上传播到到DOM最顶层节点

事件捕获，网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收

而关于事件流，w3c制定了统一的标准 —— 先捕获再冒泡

现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

  1. 捕获
了解本专栏 订阅专栏 解锁全文 超级会员免费看
day11 - 事件基础：事件监听addEventListner、DOM2事件流、事件移除removeEventListener、事件兼容性
u010544438的博客
08-17 11
本文摘要：本文系统介绍了JavaScript事件监听机制，包括事件的基本概念、两种绑定方式（传统on方式和addEventListener方法）、事件移除方法及兼容性解决方案。详细讲解了DOM事件发展历程（DOM0-DOM3），不同DOM级别的事件特性差异，以及常见的鼠标、键盘、焦点等事件类型。通过多个实战案例（如广告关闭、随机点名、轮播图等）演示了事件监听的实际应用。文章还深入解析了环境对象this和回调函数等核心概念，并提供了丰富的课后作业（如京东商品分类、小米搜索框下拉等），帮助读者巩固事件处理相关技
【JavaScript-Day 42】深入解析事件冒泡与捕获：掌握事件委托的精髓
吴师兄大模型的博客
06-15 1013
在前两篇文章中，我们学习了如何使用 `addEventListener` 监听用户操作，并了解了各种常见的网页事件。然而，当你在一个元素上触发一个事件（比如点击）时，事情真的就这么简单地结束了吗？实际上，这个事件会在 DOM 树中进行一次“旅行”。这次旅行的路径和规则，就是我们今天要探讨的核心——**事件流（Event Flow）**。理解事件流不仅是深入掌握 JavaScript 事件机制的关键，更是通往高效编程模式——**事件委托（Event Delegation）** 的必经之路。
前端开发js从小白到入门 day07-DOM事件
m0_73732919的博客
08-24 104
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UvNTvetJ-1692868217136)(media\图片7.png)]他们主要用法：1.offset系列 经常用于获得元素位置 offsetLeft offsetTop2.client经常用于获取元素大小 clientWidth clientHeight3.scroll 经常用于获取滚动距离 scrollTop scrollLeft。
前端学习day15-DOM：事件流，阻止冒泡事件流，事件的代理，事件绑定的方式，多个按钮绑定同一个事件，鼠标和键盘的事件类型
qq_45926448的博客
07-02 639
事件流，阻止冒泡事件流，事件的代理，事件绑定的方式，多个按钮绑定同一个事件，鼠标和键盘的事件类型
day12JS-Event事件
kwj258036的博客
08-28 1497
简单介绍了Event事件和事件委托
day02 -DOM—高级事件（注册事件、事件监听、删除事件、DOM事件流、事件对象、阻止默认行为、阻止事件冒泡、事件委托）—常用鼠标事件—常用的键盘事件
小琳爱分享的博客
08-05 422
day02 -DOM—高级事件（注册事件、事件监听、删除事件、DOM事件流、事件对象、阻止默认行为、阻止事件冒泡、事件委托）—常用鼠标事件—常用的键盘事件
JavaScriptAPIs学习day3--事件高级
m0_57933062的博客
05-22 1095
本文详细介绍了JavaScript中的事件处理机制，包括事件的注册、删除、事件流、事件对象、事件委托以及常用的鼠标和键盘事件。事件注册可以通过传统方式或方法监听方式实现，其中addEventListener是推荐的方法，而attachEvent则适用于IE8及更早版本。事件流分为捕获、目标、冒泡三个阶段，开发者通常更关注冒泡阶段。事件对象包含了事件的相关信息，如鼠标位置、键盘按键状态等。事件委托通过将事件监听器设置在父节点上，利用冒泡原理影响子节点，从而提高性能。常用的鼠标事件包括click、mousemo
Web-API-day3 DOM事件进阶
2301_81726198的博客
07-07 522
实现：事件对象.target. tagName 可以获得真正触发事件的元素。mouseenter 和 mouseleave 没有冒泡效果 (推荐)，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事。mouseover 和 mouseout 会有冒泡效果。事件委托是利用事件流的特征解决一些开发需求的知识技巧。原理：事件委托其实是利用事件冒泡的特点。优点：减少注册次数，可以提高程序性能。注意：匿名函数无法解绑。
Day04 JS 事件 BOM DOM 表单操作
weixin_44695396的博客
05-28 212
一 事件 1.三要素 (1)、事件源 (2)、事件名称 (3)、处理函数 2.常用事件 (1)、点击事件 onclick (2)、失焦事件 onBlur (3)、聚焦事件 onfocus (4)、改变域对象 onchange (5)、鼠标悬停事件 onmouserover (6)、鼠标移开事件 onmouseout (7)、键盘按下事件 onkeydown (8)、键盘...
Jquery——Day3（事件对象+事件冒泡+默认行为阻止）
zxy9602的博客
02-24 459
1、事件对象 即event对象，通过处理函数默认传递接受。 //通过处理函数传递事件对象； $(function(){ $("input").bind('click',function(e){ alert("欢迎光临！"); }); }); 凡是事件，都包含有属性和方法 A、event.target与event.currentTarget、relatedTarget区别： （1）
Vue.js深入解析：v-on事件处理
"Vue.js的事件处理技术，包括v-on指令的使用，监听DOM事件，方法事件处理器，内联处理器方法以及事件修饰符的应用。" Vue.js作为一个流行的前端框架，其核心特性之一就是数据绑定和事件处理。在本文中，我们将深入...
FE21-JS-DAY5-Valentin-Evelyn
03-10
6. **事件和事件处理**：在前端开发中，事件是用户与页面交互的关键，学习如何绑定和触发事件，以及事件冒泡和事件捕获机制。 7. **DOM操作**：使用JavaScript操作文档对象模型（DOM），包括选择元素、添加/删除...
JavaScript从基础到精通 （webAPIs day04 事件流+事件委托+页面加载事件）
m0_58044090的博客
09-05 457
webAPIs：事件流、事件冒泡、事件捕获、阻止冒泡、事件委托、页面加载、页面滚动等内容。
大数据毕业设计选题推荐-基于大数据的北京气象站数据可视化分析系统-Hadoop-Spark-数据可视化-BigData
IT毕设梦工厂的博客
08-21 1532
基于大数据的北京气象站数据可视化分析系统 摘要：本系统采用Hadoop+Spark大数据框架，结合Django/Spring Boot后端与Vue前端，实现了对北京气象数据的多维度分析与可视化展示。系统支持年度气温变化、降水量趋势、极端天气事件等分析，通过Spark分布式计算高效处理海量数据，为气象研究提供决策支持。开发采用Python/Java双语言，集成HDFS、Spark SQL等技术，实现数据存储、处理与可视化全流程。系统界面包含数据大屏、时间序列分析、空间分布等模块，有效提升了气象数据的分析效率。
react样式问题
qq_44136028的博客
08-22 438
React组件样式控制主要有三种方式：1）内联样式，通过style属性传递JavaScript对象，支持动态样式但需驼峰命名；2）CSS类名，使用className绑定静态样式；3）CSS-in-JS（如styled-components），将CSS嵌入JS生成带样式组件，支持动态主题切换。三种方式各具特点，内联样式适合简单动态样式，CSS类名适合静态样式，CSS-in-JS适合复杂组件化样式需求。
Figma MCP 的作用与使用方法
pumpkin84514的博客
08-23 746
（如 Cursor、Claude Code 等）无缝集成的技术，旨在将 Figma 设计稿高效转换为代码，提升设计与开发的协作效率。的结合，显著提升了设计到代码的转换效率。开发者只需完成环境配置与链接粘贴，即可实现设计稿的自动化代码生成，减少手动工作量并降低出错率。Figma MCP（Model Context Protocol）是一种通过。，用于与 Figma 和 AI 工具通信。Figma MCP 需要本地运行一个。Figma MCP 通过。
JavaScript基础语法five
2301_79744908的博客
08-21 459
本文介绍了JavaScript中对象的基本概念和使用方法。对象是一种无序的数据集合，由属性和方法组成，可以通过点语法或方括号访问属性。文章详细讲解了对象的增删改查操作、方法的定义与调用，以及使用for-in遍历对象的技巧。同时介绍了Math内置对象及其常用方法（如ceil、floor、round等），包括随机数生成公式和猜数字案例的实现。最后指出null属于object类型，并提供了生成N-M范围随机数的通用公式。
从入门到精通：Java设计模式——单例模式
m0_73590302的博客
08-21 881
本文先解析单例模式 “确保类仅一个实例、提供全局访问点” 的定义，及唯一性、自我实例化、全局访问三大特点，说明其节省资源、保数据一致性的作用。接着详解饿汉式、懒汉式（含线程安全与不安全）、双重检查锁、静态内部类、枚举 6 种实现方式，分析各方式代码、原理、优缺点，尤其聚焦懒汉式多线程安全问题与双重检查锁中 volatile 的作用。还介绍单例在日志记录器、配置管理器等场景的应用，对比优缺点，关联 Spring 框架中 Bean 的单例管理，最后总结要点并给出设计模式学习建议。
后台管理系统-16-vue3之动态路由的实现
最新发布
qq_20466211的博客
08-25 104
动态添加路由函数，解决多账号路由权限问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值