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

Javascript的API基本内容（二）

news 2026/2/8 6:49:50

 一、事件监听

 结合 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 。

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

  1. ev.type 当前事件的类型

  2. ev.clientX/Y 光标相对浏览器窗口的位置

  3. 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 使用事件时&#xff0c;需要为 DOM 对象添加事件监听&#xff0c;等待事件发生&#xff08;触发&#xff09;时&#xff0c;便立即调用一个函数。 addEventListener 是 DOM 对象专门用来添加事件监听的方法&#xff0c;它的两个参数分别为【事件类型】和…...

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

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

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

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

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

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

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

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

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

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

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

一、系统介绍1.开发环境操作系统&#xff1a;Win10开发工具 &#xff1a;IDEA2018JDK版本&#xff1a;jdk1.8数据库&#xff1a;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. 什么是软件测试 软件测试就是验证软件产品特性(功能, 界面, 兼容性, 性能…)是否符合用户的需求&#xff0c;同时软件测试不仅要测试系统是否做了其应该做的, 还需要测试系统是否未作其不应该做的。 2. 调试与测试 软件测试与调试的区别&#xff1a; …...

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

数学建模介绍

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a; &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是对我最大的激励…...

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

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

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

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

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

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

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

3 决策树及Python实现

1 主要思想 1.1 数据 1.2 训练和使用模型 训练&#xff1a;建立模型&#xff08;树&#xff09; 测试&#xff1a;使用模型&#xff08;树&#xff09; Weka演示ID3&#xff08;终端用户模式&#xff09; 双击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来理解函数指针这一全新的概念&#xff0c;如图1 我们用一段代码来验证一下&#xff1a; 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

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

相同点&#xff1a; ||和&&都是逻辑运算符&#xff0c;而|和&是位运算符。位运算符的优先级要比逻辑运算符的优先级高。 &和&&的区别 &和&&都可以用作逻辑与的运算符&#xff0c;表示逻辑与&#xff08;and&#xff09;&#xff0c;当运…...

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

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

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

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

RabbitMQ实现死信队列

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

编程日记 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&#xff08;五&#xff09;Vuex一、什么是Vuex二、Vuex工作原理三、搭建Vuex环境四、求和案例分析4.1 求和案例——vue实现4.2 求和案例——vuex实现&#xff08;五&#xff09;Vuex 一、什么是Vuex 1.概念 在Vue中实现集中式状态&#xff08;数据&#xff09;管理的一…...

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

SSM知识快速复习

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

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2026/2/2 18:52:32

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/9/19 11:48:17

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

编程新知 2025/9/17 10:04:40