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

【JavaScript】十三、事件监听与事件类型

article 2026/2/12 9:13:38

文章目录

  • 1、事件监听
    • 1.1 案例：击关闭顶部广告
    • 1.2 案例：随机点名
    • 1.3 事件监听的版本
  • 2、事件类型
    • 2.1 鼠标事件
      • 2.1.1 语法
      • 2.1.2 案例：轮播图主动切换
    • 2.2 焦点事件
      • 2.2.1 语法
      • 2.2.2 案例：模拟小米搜索框
    • 2.3 键盘事件
      • 2.3.1 语法
      • 2.3.2 回车发布评论
  • 2.4 文本事件
      • 2.4.1 语法
      • 2.4.2 案例：评论字数统计

1、事件监听

让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做为响应

  • 语法：

在这里插入图片描述

  • 示例：
<body><button>按钮</button><script>const btn = document.querySelector('button')// 事件类型要加引号// 每点击一次，执行一次函数btn.addEventListener('click', function () {alert('点击成功～')})</script>
</body>

在这里插入图片描述

监听三要素：

  • 事件源 (谁被触发了，是一个DOM对象)
  • 事件类型 (用什么方式触发，点击还是鼠标经过等)
  • 事件处理程序 (要做什么事情)

1.1 案例：击关闭顶部广告

需求：点击关闭之后，顶部关闭

思路：

  • 广告页面用一个div大盒子嵌套一个div小盒子，小盒子里放个关闭图标x
  • 点击x，隐藏大盒子，display:none 隐藏元素 display:block 显示元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 1000px;height: 200px;background-color: blue;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;font-size: 16px;line-height: 20px;/*鼠标箭头变为小手样式 */cursor: pointer;}</style>
</head><body><div class="box">一刀999！<div class="box1">x</div></div><script>const x = document.querySelector('.box1')const div = document.querySelector('.box')x.addEventListener('click', function () {div.style.display = 'none'})</script>
</body></html>

在这里插入图片描述

1.2 案例：随机点名

思路：

  • 点名器上名字快速闪动，用定时器 + 短时间重复执行，从数组中随机选择数据渲染
  • 点击开始，打开定时器
  • 点击结束，关闭定时器，取出当前数据，并从数组中删除该数据
  • 当数组中仅剩一个数据时，不用抽了，disabled = true
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.uname {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>
</head><body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="uname">即将开始随机抽</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组const arr = ['马超', '黄忠', '赵云', '关羽', '张飞', '曹操']// 定时器ID（全局变量）let timerId = 0// 抽中数据的索引（全局变量）let random// 获取DOM对象const start = document.querySelector('.start')const end = document.querySelector('.end')const uname = document.querySelector('.uname')// 点击开始，打开定时器start.addEventListener('click', function () {// 返回定时器IDtimerId = setInterval(function () {random = Math.floor(Math.random() * arr.length)uname.innerHTML = arr[random]}, 10)  // 十毫秒刷新一次// 如果数组长度剩1了，那就置灰开始和结束按钮if (arr.length === 1) {start.disabled = trueend.disabled = true}})// 点击关闭，清除定时器end.addEventListener('click', function () {clearInterval(timerId)arr.splice(random, 1)})</script>
</body></html>

在这里插入图片描述

1.3 事件监听的版本

  • 在DOM L0版本，语法是：事件源.on事件 = function() { }
  • 在DOM L1版本，语法是：事件源.addEventListener(事件， 事件处理函数)

前者做为早期语法，会产生覆盖，如下，绑定两次点击时间，只有第二个生效，也就是说只有一个22的弹窗，这种类似赋值覆盖，let num =1 ; num = 2

在这里插入图片描述

但DOM L1的事件监听语法，则不会覆盖，下面这么写，会有11和22两个弹窗

在这里插入图片描述

2、事件类型

在这里插入图片描述

2.1 鼠标事件

2.1.1 语法

相关事件：

  • click：鼠标点击
  • mouseenter：鼠标经过
  • mouseleave：鼠标离开

演示鼠标事件中的鼠标经过和离开：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: greenyellow;}</style>
</head><body><!-- 空盒子 --><div></div><script>const div = document.querySelector('div')div.addEventListener('mouseenter', function () {console.log('鼠标经过···');})div.addEventListener('mouseleave', function () {console.log('鼠标离开...');})</script>
</body></html>

在这里插入图片描述

2.1.2 案例：轮播图主动切换

链接🔗：https://blog.csdn.net/llg___/article/details/146964079

2.2 焦点事件

2.2.1 语法

相关事件：

  • focus：获得焦点（获得光标）
  • blur：失去焦点（失去光标）

示例：

<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('focus', function () {console.log('获得焦点');})input.addEventListener('blur', function () {console.log('失焦了');})</script>
</body>

效果：

在这里插入图片描述

2.2.2 案例：模拟小米搜索框

模拟小米搜索框，搜索框获得焦点时，显示可能搜索词汇且搜索框高亮

<!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>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;}.mi .search {border: 1px solid #ff6700;}.result-list {display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>const input = document.querySelector('[type=search]')  //CSS的属性选择器const ul = document.querySelector('.result-list')// 获得焦点input.addEventListener('focus', function () {// 展示下拉框数据ul.style.display = 'block'// 让搜索框边线变黄input.classList.add('search')})// 失去焦点input.addEventListener('blur', function () {ul.style.display = 'none'input.classList.remove('search')})</script>
</body></html>

获得焦点效果：

在这里插入图片描述

失去焦点效果：

在这里插入图片描述

2.3 键盘事件

2.3.1 语法

相关事件：

  • keydown：键盘按下触发

  • keyup：键盘抬起触发

  • 示例：

<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('keydown', function () {console.log('键盘按下了');})input.addEventListener('keyup', function () {console.log('键盘弹起了');})</script>
</body>

效果：按下Enter并松开，算两个事件，一个按下 + 一个弹起
在这里插入图片描述

2.3.2 回车发布评论

链接🔗：

2.4 文本事件

2.4.1 语法

相关事件：

  • input：用户输入事件

示例：

<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('input', function () {console.log(`用户输入的内容：${input.value}`);})</script>
</body>

注意，获取这个输入值，用value属性

在这里插入图片描述

2.4.2 案例：评论字数统计

<body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea></div><div class="wrapper"><span class="total">0/200字</span></div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')// 实现获得焦点就显示评论的字数，失焦则隐藏字数计算tx.addEventListener('focus', function () {total.style.opacity = 1     // opacity,透明度样式，相比display，显示和隐藏更加柔和})tx.addEventListener('blur', function () {total.style.opacity = 0})tx.addEventListener('input', function () {// tx.value是获取到输入的字符串，后面.length获取字符串长度（包装类型）total.innerHTML = `${tx.value.length}/200字`})</script></body>

效果：

在这里插入图片描述
在这里插入图片描述

相关文章：

【JavaScript】十三、事件监听与事件类型

文章目录 1、事件监听1.1 案例&#xff1a;击关闭顶部广告1.2 案例&#xff1a;随机点名1.3 事件监听的版本 2、事件类型2.1 鼠标事件2.1.1 语法2.1.2 案例&#xff1a;轮播图主动切换 2.2 焦点事件2.2.1 语法2.2.2 案例&#xff1a;模拟小米搜索框 2.3 键盘事件2.3.1 语法2.3.…...

编程日记 2026/2/9 17:11:15

通过ansible+docker-compose快速安装一主两从redis+三sentinel

目录 示例主机列表 架构参考 文件内容 安装脚本 ansible变量&#xff0c;需修改 ansible配置文件和主机清单&#xff0c;需修改 运行方式 验证故障转移master 涉及redis镜像和完整的脚本文件 示例主机列表 架构参考 文件内容 安装脚本 #!/bin/bashset -e export pa…...

编程日记 2026/2/10 23:17:56

前端和AI怎么高度融合

前端工程师和人工智能&#xff08;AI&#xff09;结合可以创造出更加智能和交互式的用户体验。以下是一些前端工程师可以与AI结合的方式&#xff1a; AI聊天机器人&#xff1a;前端工程师可以开发基于AI的聊天机器人&#xff0c;用于与用户交互并提供实时帮助和支持。 个性化推…...

编程日记 2025/11/12 10:33:19

mysql docker容器启动遇到的问题整理

好几个月没折腾mysql的部署&#xff0c;弄了下&#xff0c;又遇到不少问题 问题一&#xff1a;Access denied for user ‘root‘‘172.18.0.1‘ docker容器启动后&#xff0c;本地navicat 连接报这个错误 查到两个方案&#xff0c;一个貌似是要让root用户能在任意ip地址&…...

编程日记 2026/2/5 17:38:04

HTTP keepalive 详解

一、简介 HTTP协议早期版本&#xff0c;比如1.0&#xff0c;默认是不使用持久连接的&#xff0c;也就是每个请求/响应之后都会关闭TCP连接。这样的话&#xff0c;每次请求都需要重新建立连接&#xff0c;增加了延迟和资源消耗。Keep-Alive的作用是保持连接&#xff0c;让多个请…...

编程日记 2025/12/8 8:14:50

长短期记忆神经网络（LSTM）基础学习与实例：预测序列的未来

目录 1. 前言 2. LSTM的基本原理 2.1 LSTM基本结构 2.2 LSTM的计算过程 3. LSTM实例&#xff1a;预测序列的未来 3.1 数据准备 3.2 模型构建 3.3 模型训练 3.4 模型预测 3.5 完整程序预测序列的未来 4. 总结 1. 前言 在深度学习领域&#xff0c;循环神经网络&…...

编程日记 2026/2/10 2:32:31

青少年编程与数学 02-015 大学数学知识点 01课题、概要

青少年编程与数学 02-015 大学数学知识点 01课题、概要 一、线性代数二、概率论与数理统计三、微积分四、优化理论五、离散数学六、数值分析七、信息论 《青少年编程与数学》课程要求&#xff0c;在高中毕业前&#xff0c;尽量完成大部分大学数学知识的学习。一般可以通过线上课…...

编程日记 2025/11/6 1:17:50

C++多继承

可以用多个基类来派生一个类。 格式为&#xff1a; class 类名:类名1,…, 类名n { private: … &#xff1b; //私有成员说明; public: … &#xff1b; //公有成员说明; protected: … &#xff1b; //保护的成员说明; }; class D: public A, protected B, private C { …//派…...

编程日记 2026/2/6 6:21:12

【深度学习新浪潮】DeepSeek近期的技术进展及未来动向

一、近期技术进展 模型迭代与性能提升 DeepSeek-V3-0324版本更新：2025年3月24日发布，作为V3的小版本升级，参数规模达6850亿，采用混合专家（MoE）架构，激活参数370亿。其代码能力接近Claude 3.7，数学推理能力显著提升，且在开源社区（如Hugging Face）上线。DeepSeek-R1模…...

编程日记 2026/2/5 17:37:41

工业4.0时代下的人工智能新发展

摘要&#xff1a;随着德国工业4.0时代以及中国制造2025的提出&#xff0c;工业智能化的改革的时代正逐渐到来&#xff0c;然而我国整体工业水平仍然处于工业2.0水平。围绕工业4.0中智能工厂、智能生产、智能物流这三大主题&#xff0c;结合国内外研究现状&#xff0c;对人工智能…...

编程日记 2026/2/9 4:52:15

监控易一体化运维：高性能与易扩展，赋能运维新高度

在当今数字化时代&#xff0c;云技术、大数据、智慧城市等前沿科技蓬勃发展&#xff0c;企业和城市对 IT 基础设施的依赖程度与日俱增。在这样的大环境下&#xff0c;运维系统的高性能与易扩展性对于保障业务稳定运行和推动发展的关键意义。今天&#xff0c;为大家深入剖析监控…...

编程日记 2026/2/5 20:14:30

机器学习stats_linregress

import numpy as np from scipy import stats# r stats.linregress(xs, ys) 是一个用于执行简单线性回归的函数&#xff0c;通常来自 scipy.stats 库。# 具体含义如下&#xff1a;# stats.linregress&#xff1a;执行线性回归分析&#xff0c;拟合一条最佳直线来描述两个变量 …...

编程日记 2026/2/11 5:24:04

Linux系统01---指令

目录 学习的方法 Linux 系统介绍 2.1 Unix 操作系统&#xff08;了解&#xff09; 2.2 Linux 操作系统&#xff08;了解&#xff09; 2.3 Linux 操作系统的主要特性&#xff08;重点&#xff09; 2.4 Linux 与 Unix 的区别与联系 2.5 GUN 与 GPL&#xff08;了解&#…...

编程日记 2026/2/5 17:36:25

【蓝桥杯14天冲刺课题单】Day 8

1.题目链接&#xff1a;19714 数字诗意 这道题是一道数学题。 先考虑奇数&#xff0c;已知奇数都可以表示为两个相邻的数字之和&#xff0c;2k1k(k1) &#xff0c;那么所有的奇数都不会被计入。 那么就需要考虑偶数什么情况需要被统计。根据打表&#xff0c;其实可以发现除了…...

编程日记 2026/2/7 5:15:07

23.6 CharGLM多模态API实战：24k上下文角色一致性优化全解析

CharGLM多模态API实战：24k上下文角色一致性优化全解析 关键词：多模态大模型, CharGLM API 调用, 角色一致性控制, 上下文感知, 对话系统优化 演示 CharGLM 的对话效果 CharGLM 作为支持 24k 上下文窗口的多模态对话模型，在角色扮演场景中展现出强大的交互能力。本节通过实…...

编程日记 2026/2/2 2:48:13

DeepSeek 开源的 3FS 如何？

DeepSeek 3FS&#xff08;Fire-Flyer File System&#xff09;是一款由深度求索&#xff08;DeepSeek&#xff09;于2025年2月28日开源的高性能并行文件系统&#xff0c;专为人工智能训练和推理任务设计。以下从多个维度详细解析其核心特性、技术架构、应用场景及行业影响&…...

编程日记 2026/2/5 18:53:19

基于 Three.js 实现 3D 数学欧拉角

大家好&#xff01;我是 [数擎AI]&#xff0c;一位热爱探索新技术的前端开发者&#xff0c;在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情&#xff0c;欢迎关注我的文章&#xff0c;我们一起成长、进步&#xff01; 开发领域&#xff1a;前端开发 | AI 应…...

编程日记 2026/1/22 1:36:15

AI Agent成为行业竞争新焦点：技术革新与商业重构的双重浪潮

近年来&#xff0c;AI Agent&#xff08;人工智能代理&#xff09;凭借其自主感知、决策与执行能力&#xff0c;迅速成为全球科技与商业领域的核心竞争赛道。无论是互联网巨头、初创企业&#xff0c;还是传统行业&#xff0c;均在加速布局这一领域&#xff0c;试图在智能化浪潮…...

编程日记 2026/2/1 20:40:45

大数据（4.5）Hive聚合函数深度解析：从基础统计到多维聚合的12个生产级技巧

目录 背景一、Hive聚合函数分类与语法1. 基础聚合函数2. 高级聚合函数 二、6大核心场景与案例场景1&#xff1a;基础统计&#xff08;SUM/COUNT&#xff09;场景2&#xff1a;多维聚合&#xff08;GROUPING SETS&#xff09;场景3&#xff1a;层次化聚合&#xff08;ROLLUP&…...

编程日记 2026/1/24 1:25:26

无线通信技术（四）：一文读懂短距离无线通信技术

目录 一.技术介绍 1.1 Wi-Fi 1.2 蓝牙 1.3 ZigBee 1.4 IrDA 1.5 NFC 1.6 UWB 二.技术对比 三.未来趋势与挑战 3.1 技术融合 3.2 标准化难题 3.3 新兴应用 短距离无线通信技术是物联网、智能家居、移动支付等领域的核心支撑。这些技术通过不同频段、传输方式和场景…...

编程日记 2026/1/24 19:01:33

SqlServer整库迁移至Oracle

import pandas as pd from sqlalchemy import create_engine, text import cx_Oracle from sqlalchemy.exc import DatabaseError import traceback# SQL Server 配置 sql_server_conn_str mssqlpyodbc://用户名:密码数据库地址:端口/库名?driverODBCDriver11forSQLServer sq…...

编程日记 2026/1/22 12:44:41

通过 Docker Swarm 集群探究 Overlay 网络跨主机通信原理

什么是Overlay网络, 用于解决什么问题 ? Overlay网络通过在现有网络之上创建一个虚拟网络层, 解决不同主机的容器之间相互通信的问题 如果没有Overlay网络&#xff0c;实现跨主机的容器通信通常需要以下方法&#xff1a; 端口映射使用宿主机网络模式 这些方法牺牲了容器网络…...

编程日记 2026/2/5 5:15:34

HarmonyOS NEXT开发进阶（十四）：HarmonyOS应用开发者基础认证试题集汇总及答案解析

文章目录 一、前言二、判断题&#xff08;134道&#xff09;三、单选题&#xff08;210道&#xff09;四、多选题&#xff08;123道&#xff09;五、拓展阅读 一、前言 鸿蒙原生技能学习阶段&#xff0c;通过官方认证的资格十分有必要&#xff0c;在项目实战前掌握基础开发理论…...

编程日记 2026/2/5 17:27:55

linux shell 删除空行(remove empty lines)

命令行 grep -v ^$ file sed /^$/d file 或 sed -n /./p file awk /./ {print} file 或 awk {if($0!" ") print} tr -s "n"vim交互 %s/^n//g...

编程日记 2026/2/11 9:07:08

MSVC编译遇到C2059、C2143、C2059、C2365、C2059等错误的解决方案

MSVC编译时&#xff0c;遇到如下错误&#xff1a; c:\program files (x86)\windows kits\10\include\10.0.18362.0\um\msxml.h(1842): error C2059: 语法错误:“常数” [D:\jenkins_home\workspace\xxx.vcxproj] c:\program files (x86)\windows kits\10\include\10.0.18362.0…...

编程日记 2026/2/5 17:27:57

AI重塑云基础设施，亚马逊云科技打造AI定制版IaaS“样板房”

AI正在彻底重塑云基础设施。 IDC最新《2025年IDC MarketScape&#xff1a;全球公有云基础设施即服务&#xff08;IaaS&#xff09;报告》显示&#xff0c;AI正在通过多种方式重塑云基础设施&#xff0c;公有云IaaS有望继续保持快速增长&#xff0c;预计2025年全球IaaS的整体规…...

编程日记 2026/2/5 17:27:56

Linux系统之systemctl管理服务及编译安装配置文件安装实现systemctl管理服务

目录 一.systemctl 管理服务 1.systemctl管理 2.设置服务卡机自启动或开机不启动 二.编译安装配置文件编写使得可以使用systemctl管理 1、编写配置文件原因 2、添加配置文件实现systemctl管理服务 一.systemctl 管理服务 1.systemctl管理 基本格式&#xff1a; systemc…...

编程日记 2026/2/10 23:22:27

【NLP 52、多模态相关知识】

生活应该是美好而温柔的&#xff0c;你也是 —— 25.4.1 一、模态 modalities 常见&#xff1a; 文本、图像、音频、视频、表格数据等 罕见&#xff1a; 3D模型、图数据、气味、神经信号等 二、多模态 1、Input and output are of different modalities (eg&#xff1a; tex…...

编程日记 2026/2/5 17:36:34

【树莓派Pico FreeRTOS】-软件定时器(Software Timers)

软件定时器(Software Timers) 文章目录 软件定时器(Software Timers)1、硬件准备2、软件准备3、FreeRTOS的软件定时器介绍3.1 触发一次定时器(Oneshort Timer)3.2 重复定时器RP2040 由 Raspberry Pi 设计，具有双核 Arm Cortex-M0+ 处理器和 264KB 内部 RAM，并支持高达 16MB 的…...

编程日记 2025/12/16 11:31:53

My first day in QT programming

My first QT code this->setWindowTitle("HelloWorld"); //设置窗口名称 this->resize(400, 300); //设置窗口大小 QPushButton* btn new QPushButton; //新建按钮组件 btn->setParent(this); //为按钮指定父对象 …...

编程日记 2025/11/29 9:13:44