【JavaScript】APIs篇02——DOM事件

原创 已于 2025-03-04 16:20:34 修改 · 606 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2025-01-19 17:53:50 首次发布

 黑马程序员视频地址：黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=78https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=78 

目录

事件监听（绑定）

事件监听其他版本（了解）

事件类型

事件对象

获取事件对象

事件对象常用属性

环境对象

回调函数

事件流

事件流及其两个阶段

事件捕获

事件冒泡

阻止冒泡

阻止默认行为

解绑事件

解绑addEventListener事件

解绑on事件

事件委托

其他事件

页面加载事件

等待全部资源资源加载完执行

页面资源

单个资源 

等待DOM节点加载完执行

页面滚动事件

函数代码 

获取卷去位置

滚动到指定坐标

页面尺寸事件

函数代码 

获取元素宽高

元素尺寸与位置

获取宽高

获取位置 

距父级元素位置

距视口位置 

事件监听（绑定）

事件监听其他版本（了解）

事件类型

像focus这种既可以作为事件类型在添加事件监听器时使用，也可以作为元素对象的方法直接调用 

注意事项

  • 并非所有元素都支持focus方法，一般来说，表单元素（如<input>、<textarea>等）以及具有tabindex属性的元素可以使用focus方法。
  • 当元素使用disabled属性被禁用时，调用focus方法不会使其获得焦点。

事件对象

获取事件对象

事件对象常用属性

环境对象

回调函数

事件流

事件流及其两个阶段

事件捕获

事件冒泡

阻止冒泡

阻止默认行为

解绑事件

解绑addEventListener事件

解绑on事件

事件委托

其他事件

页面加载事件

等待全部资源资源加载完执行

 *全部资源（包括DOM节点、图片资源、样式表内容） 

页面资源

单个资源 

等待DOM节点加载完执行

页面滚动事件

函数代码 

获取卷去位置

页面滚动注意：

滚动到指定坐标

页面尺寸事件

函数代码 

获取元素宽高

元素尺寸与位置

获取宽高

获取位置 

距父级元素位置

距视口位置 

  

100天精通Python（爬虫篇）——第118天：selenium自动化操作浏览器基础大总结
努力让自己发光，对的人才能迎着光而来
07-18 10万+
一、Selenium框架环境搭建 1. 下载模块 2. 安装浏览器驱动WebDriver 二、基础操作 1. 打开浏览器 2. 无界面模式 3. 元素定位 4. 元素操作 5. 前进后退 6. 执行js 7.页面等待 隐式等待（常用） 显式等待（了解） 三、进阶操作 1. 使用代理ip 2. 修改请求头 3. 隐藏指纹特征.....................
Web APIs笔记02——DOM-事件基础
visionchyw的博客
06-29 185
Web APIs笔记02——DOM-事件基础
Web APIs——Dom事件基础
2302_77145972的博客
10-04 426
事件监听（绑定）
JavaScript中 Web APIs —— DOM
weixin_61920612的博客
03-06 2145
JavaScript中 Web APIs —— DOM
Web APIs笔记04——DOM-事件高级
visionchyw的博客
07-06 198
Web APIs笔记04——DOM-事件高级
JavaScript（六）—— DOM 事件高级
imByte的博客
09-28 684
本篇为 JavaScript 系列笔记第六篇，将陆续更新后续内容。参考：黑马程序员JavaScript核心教程，前端基础教程 系列笔记： JavaScript（一）—— 初识JavaScript / 注释 / 输入输出语句 / 变量 / 数据类型 JavaScript（二）—— 运算符 / 流程控制 / 数组 JavaScript（三）—— 函数 / 作用域 / 预解析 / 对象 JavaScript（四）—— 内置对象 / 简单数据类型与复杂类型 JavaScript（五）—— Web APIs 简介.
【JavaScript】APIs篇01——DOM获取与属性操作
Hello World！
01-19 916
变量声明的选择(const)、WebAPI基本认识、获取DOM对象、操作元素内容、操作元素属性（classList）、常用属性、CSS样式属性、表单元素属性、自定义属性、定时器（间歇函数）
【JavaScript】APIs篇03——DOM节点&Bom操作&本地存储&正则表达式
Hello World！
01-20 2390
日期对象、节点操作、查找节点、增加节点、克隆节点、删除节点、M端事件、JS插件、定时器（延时函数）、JS执行机制、location对象、navigator对象、history对象、本地存储、数组的方法（map、join）、正则表达式
JavaScript——3（Web APIs——DOM）
m0_74536370的博客
04-27 330
API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结于内部如何实现；Web API 主要针对于浏览器提供的接口，主要针对于浏览器做交互效果；Web API 一般都有输入和输出（函数的传参和返回值）， Web API 很多都是方法（函数）；文档对象模型（DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
Web APIs——DOM-事件基础
m0_52177571的博客
03-31 1280
目录 一、 事件 1.什么是事件？ 2.什么是事件监听？ 3.事件监听三要素： 事件监听 4.事件类型 鼠标事件 焦点事件 键盘事件 文本事件 二、高阶函数 1.函数表达式 2.回调函数 三、环境对象 四、编程思想 1.排他思想 一、 事件 1.什么是事件？ 事件是在编程时系统内发生的动作或者发生的事情 ，比如用户在网页上单击一个按钮 2.什么是事件监听？ 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
JavaScript——DOM1
m0_56712012的博客
01-20 376
文章标题一、Web API介绍1.API的概念2.API 和 Web API 总结二、DOM1.什么是DOM2.DOM树三、获取元素1.根据ID获取2.根据标签名获取元素3.H5新增获取元素方式4.获取特殊元素（body，html）四、事件基础 一、Web API介绍 1.API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
04-23
在Web开发中，DOM（Document Object Model）是一个关键的概念，它是HTML或XML文档的结构化表示，允许我们通过JavaScript或其他编程语言与网页内容进行交互。本资料主要关注DOM的获取和属性操作，以及如何通过这些...
黑马JS学习笔记——DOM
weixin_41185694的博客
04-24 1113
JS DOM
7天精通Web APIs——-Dom获取&属性操作（理论+实战篇）（第一天）
爱游戏爱学习的博客
04-24 1303
DOM是文档对象模型，dom对象和结点
前端在移动端中的页面切换
2509_93939582的博客
11-28 462
记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。
Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用
已掌握java全栈，简单的java项目逻辑。目前正在学习鸿蒙开发，有兴趣的小伙伴可以一起学习！！！
11-27 915
这个“简易记事本”虽只有几十行代码，却完整体现了 现代桌面应用的安全架构思想。它不仅是 Electron 的最佳入门实践，更是通往 OpenHarmony 全场景开发的桥梁。
Rust在Web中的前端框架
2509_93947499的博客
11-26 353
Yew用了虚拟DOM来优化渲染，组件状态管理也简单，举个例子，你写个计数器组件，代码结构清晰，还能用Rust的强类型系统避免运行时错误。Seed不用虚拟DOM，直接操作DOM，性能可能更好，但代码写起来得小心点，别把浏览器搞崩了。想想看，用户点个按钮，背后可能触发一堆异步操作，要是用JavaScript，一不小心就内存泄漏或者变量污染，调试起来头大。另外，Rust的性能接近C++，编译成WASM后，在浏览器里执行效率高，能处理复杂计算或者图形渲染，比如游戏或者数据可视化应用，加载速度嗖嗖的。
vue3 md文件预览和下载
zzzz121380的博客
11-26 387
本文介绍了两种在Vue3中预览Markdown文件的方法：使用md-editor-v3插件和@kangc/v-md-editor@next插件，并提供了MD内容下载为MD和PDF文件的实现方案。md-editor-v3方法简单易用，@kangc/v-md-editor支持更多主题选项。MD文件下载可通过Blob对象或downloadjs实现，PDF转换则利用html2pdf.js库将预览内容转为PDF。文章还指出markdown-it插件在表格样式上的不足，不推荐使用。两种方法都提供了完整的代码示例，包括依
前端路由管理
最新发布
2509_93941777的博客
11-28 374
这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值