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

Javascript的API基本内容（二）

news 2025/10/29 13:28:28

一、事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】

二、事件类型

将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等

（1）鼠标事件

mouseover 和 mouseenter 的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseout
mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 mouseleave

（2）键盘事件

keydown 键盘按下触发 keyup 键盘抬起触发

（3）焦点事件

focus 获得焦点

blur 失去焦点

（4）文本框输入事件

input

三、轮播图提升版

实现鼠标移入停止定时器轮播
实现鼠标移出开始定时器轮播
实现点击左右图标实现切换图片

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>.slider {width: 500px;height: 400px;margin: 0 auto;}.slider .slider-wrapper {width: 500px;height: 300px;}.slider img {width: 500px;height: 300px;margin: 0;padding: 0;}.slider .slider-footer p {margin: 0;padding-top: 10px;width: 300px;height: 30px;line-height: 30px;padding-left: 30px;}.slider .slider-footer {top: 0;height: 100px;background-color: rgb(83, 108, 108);position: relative;}.slider .slider-footer .slider-indicator {display: flex;}.slider .slider-footer li {list-style: none;width: 12px;height: 12px;margin-left: 15px;border-radius: 50%;background-color: rgb(87, 68, 68);}.slider .slider-footer li.active {background-color: rgb(236, 225, 225);}.slider .slider-footer .toggle {right: 20px;top: 10px;position: absolute;}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{url: "./images/slider01.jpg",title: "对人类来说会不会太超前了？",color: "rgb(100, 67, 68)",},{url: "./images/slider02.jpg",title: "开启剑与雪的黑暗传说！",color: "rgb(43, 35, 26)",},{url: "./images/slider03.jpg",title: "真正的jo厨出现了！",color: "rgb(36, 31, 33)",},{url: "./images/slider04.jpg",title: "李玉刚：让世界通过B站看到东方大国文化",color: "rgb(139, 98, 66)",},{url: "./images/slider05.jpg",title: "快来分享你的寒假日常吧~",color: "rgb(67, 90, 92)",},{url: "./images/slider06.jpg",title: "哔哩哔哩小年YEAH",color: "rgb(166, 131, 143)",},{url: "./images/slider07.jpg",title: "一站式解决你的电脑配置问题！！！",color: "rgb(53, 29, 25)",},{url: "./images/slider08.jpg",title: "谁不想和小猫咪贴贴呢！",color: "rgb(99, 72, 114)",},];const img = document.querySelector("img");const p = document.querySelector("p");let i = 0;// 点击左图标const prev = document.querySelector(".prev");prev.addEventListener("click", function () {i--;if (i <= 0) {i = sliderData.length - 1;}toggle();});// 点击左图标const next = document.querySelector(".next");next.addEventListener("click", function () {i++;if (i >= sliderData.length) {i = 0;}toggle();});function toggle() {// 把字写到 p里面p.innerHTML = sliderData[i].title;img.src = sliderData[i].url;document.querySelector(".slider-indicator .active").classList.remove("active");const li = document.querySelector(`.slider-indicator li:nth-child(${i + 1}`);li.classList.add("active");}let timevalue = setInterval(function () {next.click();}, 1000);const slider = document.querySelector(".slider");slider.addEventListener("mouseenter", function () {clearInterval(timevalue);});slider.addEventListener("mouseleave", function () {clearInterval(timevalue);timevalue = setInterval(function () {next.click();}, 1000);});</script></body>
</html>

四、事件对象

事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。

接下来简单看一下事件对象中包含了哪些有用的信息：

ev.type 当前事件的类型
ev.clientX/Y 光标相对浏览器窗口的位置
ev.offsetX/Y 光标相于当前 DOM 元素的位置

注：在事件回调函数内部通过 window.event 同样可以获取事件对象

<body><h3>事件对象</h3><p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p><hr><div class="box"></div><script>// 获取 .box 元素const box = document.querySelector('.box')// 添加事件监听box.addEventListener('click', function (e) {console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');// 事件回调函数的第1个参数即所谓的事件对象console.log(e)})</script>
</body>

五、tab鼠标经过显示不同的板块案例

<body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">个护</a></li><li><a href="javascript:;">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./images/tab00.png" alt="" /></div><div class="item"><img src="./images/tab01.png" alt="" /></div><div class="item"><img src="./images/tab02.png" alt="" /></div><div class="item"><img src="./images/tab03.png" alt="" /></div><div class="item"><img src="./images/tab04.png" alt="" /></div></div></div><script>const as = document.querySelectorAll(".tab-nav a");for (let i = 0; i < as.length; i++) {as[i].addEventListener("mouseenter", function () {console.log(as[i]);document.querySelector(".tab-nav .active").classList.remove("active");this.classList.add("active");document.querySelector(".tab-content .active").classList.remove("active");document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add("active");});}</script></body>

Javascript的API基本内容（二）

一、事件监听结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。 addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和…...

编程日记 2023/2/27 20:51:08

ChatGPT热度“狂飙”，OceanBase也去找它唠了唠

最近互联网的关键字非 ChatGPT 莫属就是这个小东西集唠嗑、提问、答疑、科普、写作于一体让我看看哪个孤独的打工人还没和 ChatGPT 聊上一聊有人说 ChatGPT 这么智能或将取代人类的工作 OceanBase 的小编表示不服气于是，抱着好奇之心试了一试对 …...

编程日记 2023/2/27 20:50:00

HTTP协议基础知识点扫盲；HTTPS协议及密码学基础

目录一、Http协议的特性二、http协议的请求 1.请求行第一行，包含三个信息：请求方式，url，http协议版本 2.请求头浏览器向服务器发送一些状态数据，标识数据等等 3.请求主体请求代理端项服务器端，发送的…...

编程日记 2023/2/27 20:48:50

【golang/go语言】Go语言之反射

本文参考了李文周的博客——Go语言基础之反射。一、反射初识 1. 什么是反射在计算机科学中，反射是指计算机程序在运行时（run time）可以访问、检测和修改它本身状态和行为的一种能力。用比喻来说，反射就是程序在运行的时候能够…...

编程日记 2023/2/27 20:47:38

Java+Swing+Mysql实现超市管理系统

一、系统介绍1.开发环境操作系统：Win10开发工具 ：IDEA2018JDK版本：jdk1.8数据库：Mysql8.02.技术选型JavaSwingMysql3.功能模块4.系统功能1.系统登录登出管理员可以登录、退出系统2.商品信息管理管理员可以对商品信息进行查询、添加…...

编程日记 2023/2/27 20:46:28

华为OD机试题，用 Java 解【机器人走迷宫】问题

最近更新的博客华为OD机试题，用 Java 解【停车场车辆统计】问题华为OD机试题，用 Java 解【字符串变换最小字符串】问题华为OD机试题，用 Java 解【计算最大乘积】问题华为OD机试题，用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数（Java） | 机试题算法思路【2023】使…...

编程日记 2023/2/27 20:45:21

软件测试基本概念

软件测试基本概念 1. 什么是软件测试软件测试就是验证软件产品特性(功能, 界面, 兼容性, 性能…)是否符合用户的需求，同时软件测试不仅要测试系统是否做了其应该做的, 还需要测试系统是否未作其不应该做的。 2. 调试与测试软件测试与调试的区别： …...

编程日记 2023/2/27 20:43:02

数学建模介绍

🚀write in front🚀 📜所属专栏： 🛰️博客主页：睿睿的博客主页 🛰️代码仓库：🎉VS2022_C语言仓库 🎡您的点赞、关注、收藏、评论，是对我最大的激励…...

编程日记 2023/2/27 20:40:49

【LVGL】学习笔记--(2)GUI Guider的使用

基于上一篇【LVGL】学习笔记--(1)Keil中嵌入式系统移植LVGL，已经成功地移植了LVGL到我们的嵌入式板子上，并配合磁控旋钮编码器（或者诸如触摸屏、按键、键盘等其他输入设备均可），实现了简单界面的显示工作。这一章将学习…...

编程日记 2023/2/27 20:39:40

OpenCV-PyQT项目实战（6）项目案例02：滚动条应用

欢迎关注『OpenCV-PyQT项目实战 Youcans』系列，持续更新中 OpenCV-PyQT项目实战（1）安装与环境配置 OpenCV-PyQT项目实战（2）QtDesigner 和 PyUIC 快速入门 OpenCV-PyQT项目实战（3）信号与槽机制 …...

编程日记 2023/2/27 20:37:28

3 决策树及Python实现

1 主要思想 1.1 数据 1.2 训练和使用模型训练：建立模型（树） 测试：使用模型（树） Weka演示ID3（终端用户模式） 双击weka.jar选择Explorer载入weather.arff选择trees–>ID3构建树…...

编程日记 2023/2/27 20:36:20

小程序和Vue+uniapp+unicloud培训课件

文章目录**一、什么是小程序****1.1** **小程序简介****1.2** **小程序的特点****1.3** **小程序的开发流程**个人小程序和企业小程序的区别1.4 小程序代码构成1.4.1 JSON 配置1.4.2 WXML 模板**数据绑定**逻辑语法条件逻辑列表渲染模板引用共同属性1.4.3 WXSS 样式1.4.4 JS 逻…...

编程日记 2023/2/27 20:35:13

C语言--指针进阶2

目录前言函数指针函数指针数组指向函数指针数组的指针回调函数前言本篇文章我们将继续学习指针进阶的有关内容函数指针我们依然用类比的方法1来理解函数指针这一全新的概念，如图1 我们用一段代码来验证一下： int Add(int x, int y) {return xy;…...

编程日记 2023/2/27 20:34:05

【步进电机和 Arduino】

【步进电机和 Arduino】前言1. 什么是步进电机及其工作原理？1.1 步进电机结构1.2 绕线方式1.3 通电方式2. 如何使用Arduino和A17步进驱动器控制NEMA4988步进电机2.1 A4988 和 Arduino 连接2.2 测量AB相2.3 A4988 限流3. 步进电机和 Arduino3.1 示例代码 13.2 示例代码 24. 使…...

编程日记 2023/2/27 20:32:57

【面试一：|和||、和区别】

相同点： ||和&&都是逻辑运算符，而|和&是位运算符。位运算符的优先级要比逻辑运算符的优先级高。 &和&&的区别 &和&&都可以用作逻辑与的运算符，表示逻辑与（and），当运…...

编程日记 2023/2/27 20:31:50

【一天一门编程语言】使用汇编语言实现斐波那契数列

文章目录使用汇编语言实现斐波那契数列一、什么是斐波那契数列二、如何用汇编语言实现斐波那契数列一、汇编语言概念1.1 什么是汇编语言1.2 汇编语言的特点二、汇编语言指令2.1 简单指令2.2 复杂指令汇编语言程序结构代码实例指令集常用指令指令代码实例使用汇编语言实现斐波那…...

编程日记 2023/2/27 20:30:41

RabbitMQ实现死信队列

目录死信队列是什么怎样实现一个死信队列说明实现过程导入依赖添加配置编写mq配置类添加业务队列的消费者添加死信队列的消费者添加消息发送者添加消息测试类测试死信队列的应用场景总结死信队列是什么 “死信”是RabbitMQ中的一种消息机制，当你在消费消息时&#…...

编程日记 2023/2/27 20:29:28

【Linux】安装Tomcat教程

目录 1.上传安装包 2.解压安装包 3.启动Tomcat 4.查看启动日志 5.查看进程 6.开放端口 7.停止Tomcat 1.上传安装包使用FinalShell自带的上传工具将Tomcat的二进制发布包上传到Linux(与前面上传JDK安装包步骤一致)。 2.解压安装包将上传上来的安装包解压到指定目录…...

编程日记 2023/2/27 20:28:19

学习笔记之Vuex（五）

Vuex（五）Vuex一、什么是Vuex二、Vuex工作原理三、搭建Vuex环境四、求和案例分析4.1 求和案例——vue实现4.2 求和案例——vuex实现（五）Vuex 一、什么是Vuex 1.概念在Vue中实现集中式状态（数据）管理的一…...

编程日记 2023/2/27 20:27:11

SSM知识快速复习

SSM知识快速复习SpringIOCDIIOC容器在Spring中的实现常用注解Autowired注解的原理AOP相关术语作用动态代理实现原理事务Transactional事务属性：只读事务属性：超时事务属性：回滚策略事务属性：事务隔离级别事务属性：事务…...

编程日记 2023/2/27 20:25:52

智慧医疗能源事业线深度画像分析（上）

引言医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/10/19 7:02:21

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/8/16 7:00:37

Go 语言接口详解

Go 语言接口详解核心概念接口定义在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...

编程新知 2025/10/23 18:29:35

dify打造数据可视化图表

一、概述在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...

编程新知 2025/10/22 17:24:09

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。方法一：使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...

编程新知 2025/10/27 13:38:30