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

Javascript的API基本内容（二）

news 文章来源：https://blog.csdn.net/qq_55928824/article/details/129227273 2024/11/18 10:18:57

 一、事件监听

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

【Linux】安装MySQL

目录 1.检测当前系统是否安装过MySQL相关数据库 2. 卸载现有的MySQL数据库 3.上传解压 4.顺序安装rpm包 5.启动MySQL 6.查看临时密码 7.登录MySQL 8.开放端口 1.检测当前系统是否安装过MySQL相关数据库 需要通过rpm相关指令&#xff0c;来查询当前系统中是否存在已安…...

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

【深度学习】手把手教你开发自己的深度学习模板

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言1数据相关1.1 数据初探1.2.数据处理1.3 数据变形2 定义网络&#xff0c;优化函数3. 训练前言 入坑2年后&#xff0c;重新梳理之前的知识&#xff0c;发现其实需…...

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

一个诡异的 Pulsar InterruptedException 异常

背景 今天收到业务团队反馈线上有个应用往 Pulsar 中发送消息失败了&#xff0c;经过日志查看得知是发送消息时候抛出了 java.lang.InterruptedException 异常。 和业务沟通后得知是在一个 gRPC 接口中触发的消息发送&#xff0c;大约持续了半个小时的异常后便恢复正常了&…...

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

Java岗面试题--Java并发（volatile 专题）

目录1. 面试题一&#xff1a;谈谈 volatile 的使用及其原理补充&#xff1a;内存屏障volatile 的原理2. 面试题二&#xff1a;volatile 为什么不能保证原子性3. 面试题三&#xff1a;volatile 的内存语义4. 面试题四&#xff1a;volatile 的实现机制5. 面试题五&#xff1a;vol…...

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

Java---打家劫舍ⅠⅡ

目录 打家劫舍Ⅰ 题目分析 代码一 代码二 打家劫舍Ⅱ 打家劫舍Ⅰ 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被…...

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

MySQL Lesson4

1&#xff1a;关于查询结果集的去重&#xff08;distinct&#xff09; select distinct job from emp; **distinct只能出现在所有字段的最前面。所表示的含有是所有的结果联合起来去重。 select distinct deptno,job from emp order by deptno; select count(distinct job)from…...

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

浅谈权限获取方法之文件上传

概述 文件上传漏洞是发生在有上传功能的应用中&#xff0c;如果应用程序对用户的上传文件没有控制或者存在缺陷&#xff0c;攻击者可以利用应用上传功能存在的缺陷&#xff0c;上传木马、病毒等有危害的文件到服务器上面&#xff0c;控制服务器。 漏洞成因及危害 文件上传漏…...

编程日记 2023/2/27 20:17:54

资产设备防拆标签安全防护和资产定位解决方案

随着社会经济的发展和高新技术的日新月异&#xff0c;对各方面的安全要求也在不断地提高&#xff0c;以物联网安防、入侵报警和出入口控制、应急系统等为主的安全防范系统日益成为各类文物场所智能化弱电工程不可或缺的组成部分&#xff0c;是重点资产管理场所内加强管理和安全…...

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

企业电子招标采购源码之电子招标投标全流程！

随着各级政府部门的大力推进&#xff0c;以及国内互联网的建设&#xff0c;电子招投标已经逐渐成为国内主流的招标投标方式&#xff0c;但是依然有很多人对电子招投标的流程不够了解&#xff0c;在具体操作上存在困难。虽然各个交易平台的招标投标在线操作会略有不同&#xff0…...

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

【考研408】计算机网络笔记

文章目录计算机网络体系结构计算机网络概述计算机网络的组成计算机网络的功能计算机网络的分类计算机网络的性能指标课后习题计算机网络体系结构与参考模型计算机网络协议、接口、服务的概念ISO/OSI参考模型和TCP/IP模型课后习题物理层通信基础基本概念奈奎斯特定理与香农定理编…...

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

淘宝美工与网站开发/谷歌独立站seo

上一篇文章介绍了如何对循环语句进行操作&#xff0c;末尾还演示了发现空串时直接继续下一循环&#xff0c;只是在初始化字符串数组时使用了“val poem2Array:Array<String?> ***”&#xff0c;该表达式不免令人疑惑&#xff0c;为何这里要在String后面加个问号&#x…...

编程日记 2024/11/18 9:53:03

搜索品牌价值的网站/系统优化大师下载

apache配置https一、yum 安装openssl和openssl-devel&#xff0c;httpd-devel二、生成证书&#xff08;也可以从公司的证书颁发机构获取&#xff09;&#xff1a;#建立服务器密钥 openssl genrsa -des3 1024 > /usr/local/apache/conf/server.key # 从密钥中删除密码&a…...

编程日记 2024/11/18 8:53:54

怎做不下网站刷枪/网络销售怎么才能找到客户

具体的报错信息&#xff1a;ArgumentException: Getting control 0s position in a group with only 0 controls when doing Repaint A OnGUI在每次绘制时会调用2次&#xff0c;第1次计算所有控件的位置&#xff0c;所有EdtorGUILayout控件方法返回的Rect均为0;第2次根据位置来…...

编程日记 2024/11/18 8:52:53

行政机关 网站源码/google搜索关键词热度

一. windows 系统下搭建jenkins环境1.1 jenkins环境搭建和构建job流程图1.2 安装jdkJDK下载地址&#xff1a; http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择对应系统的安装包下载&#xff1a;配置环境变量:新建JAVA_HOME系统环境…...

编程日记 2024/11/18 6:34:44

网站建设方法叁金手指下拉丶/下载百度到桌面上

最近在反编译class和jar包的时候&#xff0c;发现部分class无法反编译出来&#xff0c;换了最新版本的jd-gui和多个版本都不行&#xff0c;只能放弃了 解决方案&#xff1a;GitHub上找Luyten这个工具反编译 luyten是Procyon的GUI&#xff0c;是一款操作简单、功能实用的java反编…...

编程日记 2024/11/18 4:37:48

动易如何做网站/合肥网站排名推广

asp.net2.0的一些特性(downmoon收集)1、ASP.NET 2.0 中的数据访问2、ASP.NET 2.0&#xff1a;弃用 DataGrid 吧&#xff0c;有新的网格控件了&#xff01;3、常见的 ASP.NET 2.0 转换问题和解决方案4、ASP.NET 2.0 和数据绑定控件&#xff1a;新的角度&#xff0c;新的做法5、A…...

编程日记 2024/11/18 3:55:15