Web前端开发笔记之JS回顾07——事件对象、事件流、事件委托

原创 已于 2022-04-02 15:12:52 修改 · 370 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2022-04-02 11:15:06 首次发布
本文详细介绍了JavaScript中的事件对象，包括它的属性如client、offset和page。还探讨了事件流的概念，以及如何阻止事件冒泡和默认行为。文中提到了阻止冒泡的两种方法，并讲解了事件委托的原理。此外，还讨论了页面滚动、加载和其他元素加载事件的监听。最后，介绍了addEventListener的事件移除方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

事件对象是什么？

Key触发事件：

事件流：

阻止冒泡的方法：https://jingyan.baidu.com/article/2c8c281d7e2b5e0008252a24.htmlhttps://jingyan.baidu.com/article/2c8c281d7e2b5e0008252a24.html

阻止默认事件： 

 addEventListener的事件移除方法：

 事件委托：

 页面滚动事件：

页面加载事件：

页面HTML元素加载事件：

事件对象是什么？

 其中client、offset，除了这两个外还有一个page，可以尝试下面的代码

Key触发事件：

 

事件流：

 

 

阻止冒泡的方法：
https://jingyan.baidu.com/article/2c8c281d7e2b5e0008252a24.htmlhttps://jingyan.baidu.com/article/2c8c281d7e2b5e0008252a24.html

 上面我给出来JQ的阻止方法，下面来看看JS的阻止方法：

 

除了阻止冒泡外，还有

阻止默认事件： 

 至此事件流结束，下面我们来看一下注册事件的区别：

 addEventListener的事件移除方法：

 事件委托：

使用e.target得到真正选中的对象。

 页面滚动事件：

页面加载事件：

 此事件可以用在其它元素中，比如img等其它选定的对象。

页面HTML元素加载事件：

前端必备：HTML5 事件委托的高效实践
小白菜的博客
06-18 777
在前端开发中，我们经常需要为大量DOM元素绑定事件（比如商品列表的点击、评论区的删除按钮）。传统的“逐个绑定”方式会导致内存占用高、动态元素无法自动绑定等问题。本文将聚焦HTML5事件委托这一高效解决方案，覆盖其原理、实现、实战案例及注意事项，帮你从“知其然”到“知其所以然”。本文从生活故事引入，先讲事件委托的核心概念（事件冒泡、目标元素），再用代码对比传统绑定与事件委托的差异，接着通过3个实战案例演示其应用，最后总结注意事项与未来趋势。事件冒泡：事件从目标元素向上传递到父元素的机制。事件委托。
前端 DOM 与事件处理：完美结合之道
小白菜的博客
06-04 474
当你在网页上点击按钮、输入文字或滑动屏幕时，这些操作能触发页面变化（比如弹出提示、加载新内容），背后的“魔法”就是 DOM 与事件处理的结合。DOM 的本质与结构事件触发的完整流程（捕获→目标→冒泡）事件处理函数的绑定与优化事件委托的原理与实战常见问题（如事件冒泡的阻止、内存泄漏）适合所有想深入理解前端交互逻辑的开发者，尤其是对“事件总不按预期触发”“动态元素没反应”等问题困惑的同学。
25-event
qq_44808878的博客
03-17 175
第二十五章event event event事件对象是伴随着事件触发而产生的一个内置对象，它存储了关于该事件的各种信息，比如鼠标位置、按键信息等等，同时也可以它也提供了很多控制事件传递的方法。 1.兼容 IE8以下使用全局event，其他浏览器使用事件函数的第一个参数，兼容写法类似于： ele.onclick = function(ev){ ev = ev || window.event; }; 2.鼠标位置 client clientX clientY鼠标到可视区的距离。 page pa
前端基础-事件对象
逍遥云恋
03-26 541
第4章 事件对象 4.1 概述 事件的触发，大部分情况下是用户的一种行为，也就是说，我们并不能确定用户什么时间触发； 而且，由于事件的传播机制，我们甚至不能确定事件具体触发在哪个节点；这是一件很不爽的事情； 如何解决呢？ 事件发生以后，系统会调用我们写好的事件处理程序 系统会在调用处理程序时，将事件发生时有关事件的一切信息，封装成一个对象， 作为参数传给监听函数(事件处理程序)，我们把这个对象称为...
JavaScript基础-事件对象
最新发布
qq_51626500的博客
06-14 936
JavaScript基础-事件对象
【Javascript】web前端开发的重点——事件委派（代理）
kuyoru's blog
10-25 188
Javascript事件委派介绍JavaScriptweb前端开发的重点——事件委派（代理）事件委托事件委托的原理（要求记忆背诵）事件委托的作用 JavaScript web前端开发的重点——事件委派（代理） 事件委托 也叫事件代理，在jquery里称事件委派 事件委托的原理（要求记忆背诵） 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点 比如在之前的案例我们给ul注册了点击事件，然后利用对象的target来找到当前被点击li，因为被点击的li
【前端攻城师之JS基础】10事件对象
zbcwmq的博客
10-26 512
当事件被触发时，浏览器会调用响应函数，同时将一个事件对象作为实参传递给响应函数在事件对象中封装了当前事件相关的一切信息，包括鼠标的坐标，哪个按键被按下，鼠标滚轮滚的方向等可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做实参传递，而是作为window对象的属性保存，以下方法兼容IE8和其他浏览器元素.事件 = function(event){};元素.事件 = function(e){};
JS事件和DOM对象和BOM对象 (前端)
weixin_45464739的博客
11-13 312
JS事件和DOM对象和BOM对象以及表单 事件 ​ 事件(Event)是JavaScript应用跳动的心脏, 进行交互，使网页动起来。当我们与浏览器中Web页面 进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。 通过使用JavaScript，你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。 作用 (1)验证用户输入的数据
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
原js笔记
Pwsifeng的博客
01-10 2888
s原生JS笔记 电话：17339853876（微信同号） 二阶段学习内容 1、B/S架构（web结构） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)] 2、前端工程师的工作 人机交互 前后端交互 3、HTML、CSS、JS的作用和关系 一个网页由三部分组成：HTML、CSS、Javascript HTML： 结构（静态） [外链图片转存失败,源站可能有防盗链
Web APIs 全套详细笔记——案例
qq_64816065的博客
06-11 237
严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。ECMAScript 运行在浏览器中然后再结合 Web APIs 才是真正的 JavaScript，Web APIs 的核心
从零开始学前端 - 34. JS事件对象Event详解
qq_39506551的博客
10-21 849
从零开始学前端 - 34. JS事件对象Event详解 一、什么是事件对象 Even 我们在前两篇文章中对 JS 中的事件做了一个整体的介绍，其中有一个 Event 属性对事件的作用十分重要，本篇文章我们就对它做一个详细的解读。 每一个事件触发时，都会产生一个与之对应的事件对象 event ，其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容。   每当用户触发一个事件后，JS 就会自动生成一个 event 对象，根据触发事件的不同，这个对象包.
JS事件对象
qq_45473786的博客
03-21 650
文章目录事件对象概念event常见属性clientX和clientY、screenX和screenY、pageX和pageY的区别图示示例示例一示例二 事件对象概念 比如onclick、onfocus、onmousedown、onmouseover…都称作事件对象 示例： btn.onclick = function(event){ //这里的event就是当前事件的对象...
什么是事件对象（event object）？如何使用它获取事件信息？
官方推荐
10-08 1万+
什么是事件对象（event object）？如何使用它获取事件信息？
JS的事件对象详解
qq_44741577的博客
02-01 2045
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（等）、目标元素、鼠标位置、按键状态等）。JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。event.type - 获取事件类型（例如，“click”、"mousedown"等）。
JS 之 事件Event对象详解（属性、方法、自定义事件）
weixin_45092437的博客
06-10 1万+
​ 事件event对象是指在浏览器中触发事件时，浏览器会自动创建一个event对象，其中存储了本次事件相关的信息，包括事件类型、事件目标、触发元素等等。浏览器创建完event对象之后，会自动将该对象作为参数传递给绑定的事件处理函数，我们可以在事件处理函数中通过访问event对象的属性和方法，来获取事件的相关信息，并做出后续的逻辑处理。
JS事件对象、环境对象、回调函数 | 前端笔记（十四）
weixin_55901142的博客
05-02 229
/ console.log(checkAll.checked) // 得到 是 true 或者是 false。// 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的 checked。// console.log(str.trim()) // 去除字符串左右的空格。// console.log(tx.value.length) 得到输入的长度。// console.log(tx.value) // 用户输入的内容。// 一定要写到点击里面，因为每次要获得最新的个数。
从零开始学前端：事件对象，事件冒泡，事件捕获 --- 今天你学习了吗？（JS：Day22-23）
cjz0422的博客
01-18 908
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）复习：从零开始学前端：键盘事件、小球运动 — 今天你学习了吗？（JS：Day21）文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）前言第二十二~二十三节课：事件对象，事件冒泡，事件捕获一、事件对象1、事件对象2、冒泡事件3、事件监听4、事件捕获（true）（1）捕获与冒泡的执行（2）低版本IE处理5、低版本IE处理6、事件代理7、低版本IE兼容问题。
掌握Web前端核心技术：window对象与事件管理
本文档主要探讨了Web前端开发中的关键概念和技术，以...这份文档详细讲解了window对象的使用、窗口加载和调整事件、定时器方法以及JavaScript的同步和异步执行机制，对于深入理解和实践Web前端开发具有很强的指导价值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

言行物恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值