JavaScript 学习笔记（WEB APIs Day2）

最新推荐文章于 2025-08-06 16:42:26 发布
原创 最新推荐文章于 2025-08-06 16:42:26 发布 · 906 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

「写在前面」

本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：
1. JavaScript 学习笔记（Day1）
2. JavaScript 学习笔记（Day2）
3. JavaScript 学习笔记（Day3）
4. JavaScript 学习笔记（Day4）
5. JavaScript 学习笔记（Day5）
6. JavaScript 学习笔记（WEB APIs Day1）

目录

  • 1 事件监听（绑定）
  • 2 事件类型
  • 3 事件对象
  • 4 环境对象
  • 5 回调函数
  • 6 综合案例

1 事件监听（绑定）

1.1 事件监听

P94：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=94

什么是事件？

  • 事件是在编程时系统内发生的 动作或者发生的事情
  • 比如用户在网页上 单击一个按钮

什么是事件监听？

  • 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
  • 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
最低0.47元/天 解锁文章

200万优质内容无限畅学
JavaScript 学习笔记（WEB APIs Day6）
🧑‍🎓 博士研究生在读 🔬 分享生物信息学、神经生物学方面的知识 💬 合作请在后台留言
01-24 962
本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。是用于匹配字符串中字符组合的模式。通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等。是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。g 是单词 global 的缩写，匹配所有满足正则表达式的结果。
JavaScript 学习笔记（WEB APIs Day4）
🧑‍🎓 博士研究生在读 🔬 分享生物信息学、神经生物学方面的知识 💬 合作请在后台留言
01-22 964
本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html。查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html。查看基本使用流程 https://www.swiper.com.cn/usage/index.html。即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点。
JavaScript 学习笔记（WEB APIs Day5）
🧑‍🎓 博士研究生在读 🔬 分享生物信息学、神经生物学方面的知识 💬 合作请在后台留言
01-23 1033
这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常。
JavaScript 学习笔记（WEB APIs Day3）
🧑‍🎓 博士研究生在读 🔬 分享生物信息学、神经生物学方面的知识 💬 合作请在后台留言
01-21 1072
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载。事件冒泡概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素。说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。
前端学习笔记-Web APIs篇-01
Yvonne_hjj的博客
08-28 848
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API，白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能开发网页内容特效和实现用户交互标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、 selected在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
JavaScript 学习笔记（WEB APIs Day1）
🧑‍🎓 博士研究生在读 🔬 分享生物信息学、神经生物学方面的知识 💬 合作请在后台留言
01-18 1003
标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected。如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名。建议：有了变量先给 const，如果发现它后面是要被修改的，再改为 let。但是对于引用数据类型，const声明的变量，里面存的不是值，是地址。2. 操作类名(className) 操作CSS。
小白JavaScript学习笔记----web APIs
weixin_51877011的博客
04-24 2865
DOM文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能**DOM作用:**开发网页内容特效和实现用户交互Web API阶段我们学习那两部分？DOMBOMDOM 是什么？有什么作用？DOM 是文档对象模型操作网页内容，可以开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected。
黑马程序员和尚硅谷前端Javascript学习笔记
m0_45020691的博客
11-26 1866
黑马程序员和尚硅谷前端Javascript学习笔记（持续更新中）
Web APIs笔记
DanB24的博客
02-02 636
如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法， 是学习 DOM 的核心。 获取DOM对象 满足条件的第一个元素 满足条件的元素集合 返回伪数组 操作元素内容 通过修改 DOM 的文本内容，动态改变网页的内容。 将文本内容添
vue3入门-概览讲解
曹定栓的博客
08-04 631
本文介绍了Vue3项目创建和基本结构，重点对比了Vue2选项式API和Vue3组合式API的差异。Vue3使用Vite作为构建工具，相比Webpack具有更快的启动和热更新速度。文章通过一个显示div和切换背景色的示例，展示了组合式API将相关逻辑集中管理的优势，并介绍了如何通过模块化拆分setup函数来提高可维护性。最后指出选项式API适合简单场景，而组合式API更适合复杂逻辑复用和TypeScript项目。
ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理
lf_1234的博客
08-06 701
摘要：ref 不会递归处理对象的嵌套属性，仅对顶层数据进行响应式处理。若需深度响应式，应使用 reactive。示例中，ref 存储的嵌套对象 profile 修改后视图不会更新，而 reactive 能确保嵌套属性（如 age）触发更新。总结：ref 适合基本类型或简单对象（需 .value），reactive 适合复杂对象（自动深度响应式）。
数论手机辅助：打造便捷高效的移动应用交互体验
最新发布
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
08-06 735
关键在于实现 WebView 弹窗的拖动大小功能，通过监听窗口的触摸事件，在触摸按下时记录初始的窗口大小和触摸位置，在触摸移动过程中根据触摸位置的变化计算新的窗口大小，并更新窗口的布局参数，从而实现窗口大小可随触摸操作动态改变。方法中，目前只是通过 Toast 提示接收到了要插入的文本，实际应用中可以根据需求进一步完善，比如利用 AccessibilityService 来实现真正的文本插入操作，将选中的文本模拟输入到当前聚焦的输入框中，从而实现更加智能化和便捷的交互体验。在 Android 端的。
electron-多线程
在全栈和前端徘徊的程序员
08-03 653
基于 Chromium 多进程架构：每个渲染器运行在独立的进程中，避免单个页面的崩溃影响整个应用Node.js 多线程能力：通过 worker_threads 模块实现真正的多线程执行：在渲染进程中使用浏览器标准的 Web Workers APIIPC 通信机制：通过消息传递在不同进程/线程间交换数据资源共享与隔离：各进程拥有独立的内存空间，通过 IPC 实现数据共享。
用Python前后端分离开发：掌握现代Web应用构建技巧
大模型大数据攻城狮的专栏
08-06 469
重启服务，访问http://localhost:8000/docs，可以用/register和/token端点注册登录，获取Token后调用/tasks/创建任务，只有登录用户能操作自己的任务。打开浏览器，访问http://localhost:8000/docs，你会看到FastAPI自动生成的Swagger UI，里面列出了所有API端点，可以直接在线测试。任务管理应用已经能跑了，界面也美观，部署也稳妥，但如果用户多了，任务列表长到几百条，页面加载慢得像乌龟爬，API响应拖拖拉拉，用户估计得砸键盘了！
Nodejs》》Express
u013400314的博客
08-05 80
npm i express -g -D
ElementUI常用的组件展示
2302_78879607的博客
08-03 434
有时也会嵌套抽屉使用，例如： 一般都加在第一列：找到展示表格数据的部分加进去即可，一般要考虑获得选中的内容 @selection-change=“handleSelectionChange”，当selection-change触发时（复选框发生改变），就会调用后面的函数
在 MCP 中实现 “askhuman” 式交互：原理、实践与开源方案
hello！
08-05 531
本文介绍了如何在MCP（Model Context Protocol）框架下实现交互式参数收集功能。由于MCP采用无状态的一次性请求-响应模式，需要通过客户端层实现多轮对话补参。文章阐述了设计模式、Node.js示例实现，并对比了Dify、Lobe Chat等开源方案的具体实现方式。最佳实践建议保持Server无状态，通过清晰的参数描述和持久化对话状态来优化用户体验。最后提供了相关技术文档链接，帮助开发者进一步探索MCP交互功能。
第二次编程记录
m0_58537749的博客
08-04 823
本文总结了前端开发中的四个常见问题及解决方案：1. 路由跳转空白问题，通过规范模板结构解决；2. 子组件props初始未获取值问题，使用v-if等待异步数据加载；3. 数据处理问题，介绍了find、flatMap、...运算符等六种常用数组/对象操作方法；4. vue3-seamless-scroll插件类型报错问题，通过声明模块解决。文中提供了详细的代码示例，包括数据查找、去重、排序等常见操作，以及滚动插件的配置参数说明。这些解决方案覆盖了前端开发中路由、组件通信、数据处理等典型场景。
项目评审管理系统（源码+文档+讲解+演示）
PinXun_的博客
08-06 646
项目评审管理系统是一款综合性的项目管理工具，旨在通过数字化手段优化项目评审和管理的全流程。系统集成了首页、一键搜索、已建信息化项目、下年度计划和审批、项目申报及验收、报表管理、系统管理、系统监控等多个核心功能模块，帮助项目管理者提升管理效率、优化管理效果，并拓展管理范围。首页：作为系统入口，提供快速访问常用功能、查看通知公告以及系统状态概览的界面，方便用户快速了解系统动态和执行日常操作。项目评审管理系统凭借其强大的功能、先进的技术架构和开源代码的优势，为项目管理领域提供了一套高效、灵活的解决方案。
探索JavaScript Web APIs: Web APIs Playground项目介绍
11. 学习资源: Web APIs Playground 作为一个在线平台，为JavaScript开发者提供了一个互动式的环境，其中包含了大量资源，帮助他们学习和掌握Web技术。 12. 交互式学习: 该项目提供实际的代码示例和演示，使得学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

TigerZ 生信宝库

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

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

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

打赏作者

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

抵扣说明：

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

余额充值