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

API-事件监听

news 2025/12/15 15:48:34

学习目标：

  • 掌握事件监听

学习内容：

  1. 事件监听
  2. 拓展阅读-事件监听版本

事件监听：

  • 什么是事件？
    事件是在编程时系统内发生的动作或者发生的事情。

     比如用户在网页上单击一个按钮。

  • 什么是事件监听？
    就是让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。

    比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。

  • 事件监听语法

元素对象.addEventListener('事件类型',要执行的函数）

  • 事件监听三要素

    事件源：那个dom元素被事件触发了，要获取dom元素。
事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等。
事件调用的函数：要做什么事。

<title>事件监听</title>
</head><body><button>按钮</button><script>//需求：点击了按钮，弹出一个对话框//1.事件源：  按钮 //2.事件类型  点击鼠标  click 字符串const btn = document.querySelector('button')//3.事件处理程序  弹出对话框btn.addEventListener('click', function () {alert('点击了~')})</script></body>

注意：
1.事件类型要加引号
2. 函数是点击之后再去执行，每次点击都会执行一次。

  • 练习
<title>练习-京东点击关闭顶部广告</title><style>.box {position: relative;width: 1000px;height: 200px;background-color: pink;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;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><script>//1.获取事件源const box1 = document.querySelector('.box1')//关闭的是大盒子const box = document.querySelector('.box')//2.事件监听box1.addEventListener('click', function () {box.style.display = 'none'})</script></body>
  • 案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习-随机点名案例</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {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="qs">这里显示名字</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数组输出const arr = ['雪碧', '丸子', '妮妮', '源哥', '罐头']//定时器的全局变量let timerId = 0//随机号要全局变量let random = 0// 业务1 ：开始按钮模块const qs = document.querySelector('.qs')// 1.1获取开始按钮对象const start = document.querySelector('.start')//1.2添加点击事件start.addEventListener('click', function () {timerId = setInterval(function () {//随机数random = parseInt(Math.random() * arr.length)// console.log(arr[random])qs.innerHTML = arr[random]}, 35)// 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以if (arr.length === 1) {// start.disabled = true// end.disabled = truestart.disabled = end.disabled = true}})//2.关闭按钮模块const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(timerId)// 结束了，可以删除掉当前抽取的那个数组元素arr.splice(random, 1)console.log(arr)})</script></body></html>

拓展阅读-事件监听版本：

  • DOM L0
事件源.on事件 = function (){}

 <title>事件监听版本</title>
</head><body><button>点击</button><script>const btn = document.querySelector('button')btn.onclick = function () {alert(11)}btn.onclick = function () {alert(22)}</script></body>

注意：on方式会被覆盖。

  • DOM L2
事件源.addEventListener(事件,事件处理函数）

 <title>事件监听版本</title>
</head><body><button>点击</button><script>const btn = document.querySelector('button'）btn.addEventListener('click', function () {alert(11)})btn.addEventListener('click', function () {alert(22)})</script></body>

注意：addEventListener方式可绑定多次，拥有事件更多特性，推荐使用。

  • 发展史
DOM L0是DOM的发展的第一个版本；L:level
DOM L1DOM级别1于1998年10月1日成为 W3C推荐标准
DOM L2使用addEventListener注册事件
DOM L3DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

相关文章：

API-事件监听

学习目标&#xff1a; 掌握事件监听 学习内容&#xff1a; 事件监听拓展阅读-事件监听版本 事件监听&#xff1a; 什么是事件&#xff1f; 事件是在编程时系统内发生的动作或者发生的事情。 比如用户在网页上单击一个按钮。什么是事件监听&#xff1f; 就是让程序检测是否有事…...

编程日记 2024/6/23 19:55:59

如何为自己的项目生成changelog

背景 在github上看到人家的更新日志感觉很cool&#xff0c;怎么能给自己项目来一套呢 环境信息 tdstdsdeMacBook-Pro demo-doc % node -v v14.18.1 tdstdsdeMacBook-Pro demo-doc % npm -v 6.14.15硬件信息 型号名称&#xff1a;MacBook Pro版本&#xff1a; 12.6.9芯片&…...

编程日记 2024/6/23 19:53:57

MySQL之表碎片化

文章目录 1. 前言2. InnoDB表碎片3. 清除表碎片3.1 查找碎片化严重的表3.2 清除碎片 4. 小结5. 参考 1. 前言 周一在对线上表进行数据清除时&#xff0c;发现一个问题&#xff0c;我要清除的单表大概有2500w条数据&#xff0c;清除数据大概在1300w条左右&#xff0c;清除之前通…...

编程日记 2024/6/23 19:50:53

碳+绿证如何能源匹配？考虑碳交易和绿证交易制度的电力批发市场能源优化程序代码！

前言 近年来&#xff0c;面对日益受到全社会关注的气候变化问题&#xff0c;国外尤其是欧美等发达国家和地区针对电力行业制定了一系列碳减排组合机制。其中&#xff0c;碳排放权交易&#xff08;以下简称“碳交易”&#xff09;和绿色电力证书交易&#xff08;以下简称“绿证…...

编程日记 2024/6/23 19:49:52

【原创】springboot+mysql海鲜商城设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…...

编程日记 2024/6/23 19:48:50

envi5.6+SARscape560安装(CSDN_20240623)

envi和SARscape的版本必须匹配&#xff0c;否则有些功能不能使用。 Envi5.6安装 1. 点击安装程序. 2. 进入安装界面&#xff0c;点击“Next”. 3. 选择“I accept the agreement”&#xff0c;点击“Next”。 4. 选择安装路径&#xff0c;建议直接安装在默认路径下&#xff0…...

编程日记 2024/6/23 19:47:49

基本循环神经网络(RNN)

RNN背景&#xff1a;RNN与FNN 在前馈神经网络中&#xff0c;信息的传递是单向的&#xff0c;这种限制虽然使得网络变得更容易学习&#xff0c;但在一定程度上也减弱了神经网络模型的能力。 在生物神经网络中&#xff0c;神经元之间的连接关系要复杂的多。前馈神经网络可以看着…...

编程日记 2024/6/23 19:46:48

win32API（CONSOLE 相关接口详解）

前言&#xff1a; Windows这个多作业系统除了协调应⽤程序的执⾏、分配内存、管理资源之外&#xff0c;它同时也是⼀个很⼤的服务中⼼&#xff0c;调⽤这个服务中⼼的各种服务&#xff08;每⼀种服务就是⼀个函数&#xff09;&#xff0c;可以帮应⽤程式达到开启视窗、描绘图形…...

编程日记 2024/6/23 19:45:47

python爬虫学习笔记一（基本概念urllib基础）

学习资料&#xff1a;尚硅谷_爬虫 学习环境: pycharm 一.爬虫基本概念 爬虫定义 > 解释1&#xff1a;通过程序&#xff0c;根据URL进行爬取网页&#xff0c;获取有用信息 > 解释2&#xff1a;使用程序模拟浏览器&#xff0c;向服务器发送请求&#xff0c;获取相应信息…...

编程日记 2024/6/23 19:43:45

MyBatis映射器：一对多关联查询

大家好&#xff0c;我是王有志&#xff0c;一个分享硬核 Java 技术的金融摸鱼侠&#xff0c;欢迎大家加入 Java 人自己的交流群“共同富裕的 Java 人”。 在学习完上一篇文章《MyBatis映射器&#xff1a;一对一关联查询》后&#xff0c;相信你已经掌握了如何在 MyBatis 映射器…...

编程日记 2024/6/23 19:42:43

100多个ChatGPT指令提示词分享

当前&#xff0c;ChatGPT几乎已经占领了整个互联网。全球范围内成千上万的用户正使用这款人工智能驱动的聊天机器人来满足各种需求。然而&#xff0c;并不是每个人都知道如何充分有效地利用ChatGPT的潜力。其实有许多令人惊叹的ChatGPT指令提示词&#xff0c;可以提升您与ChatG…...

编程日记 2024/6/23 19:40:41

vue2和vue3数据代理的区别

前言&#xff1a; vue2 的双向数据绑定是利⽤ES5的⼀个 API &#xff0c;Object.defineProperty( )对数据进行劫持结合发布订阅模式的方式来实现的。 vue3 中使⽤了 ES6的Proxy代理对象&#xff0c;通过 reactive() 函数给每⼀个对象都包⼀层Proxy&#xff0c;通过 Proxy监听属…...

编程日记 2024/6/23 19:39:40

已解决ApplicationException异常的正确解决方法，亲测有效！！！

已解决ApplicationException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查业务逻辑 验证输入数据 确认服务器端资源的可用性 增加对特殊业务情况的处理…...

编程日记 2024/6/23 19:38:38

「前端+鸿蒙」鸿蒙应用开发-常用UI组件-图片-参数

在鸿蒙应用开发中，图片组件是展示图像的关键UI元素。以下是详细介绍图片组件的三个主要参数：图片尺寸、图片缩放和图片插值，并提供相应的示例代码。 图片尺寸 图片尺寸指的是图片组件在界面上显示的宽度和高度。你可以使用像素（px）或其他单位来指定尺寸。 width: 设置图片…...

编程日记 2024/6/23 19:37:37

Tobii Pro Lab 1.232是全球领先的眼动追踪研究实验软件

Tobii Pro Lab是全球领先的眼动追踪研究实验软件。软件功能强大且拥有友好的用户界面&#xff0c;使眼动追踪研究变得更加简单、高效。该软件提供了很高的灵活性&#xff0c;可运行高级实验&#xff0c;深入了解注意力和认知过程。 获取软件安装包以及永久授权联系邮箱:289535…...

编程日记 2024/6/23 19:33:32

【flink实战】flink-connector-mysql-cdc导致mysql连接器报类型转换错误

文章目录 一. 报错现象二. 方案二&#xff1a;重新编译打包flink-connector-cdc1. 排查脚本2. 重新编译打包flink-sql-connector-mysql-cdc-2.4.0.jar3. 测试flink环境 三. 方案一&#xff1a;改造flink连接器 一. 报错现象 flink sql任务是&#xff1a;mysql到hdfs的离线任务&…...

编程日记 2024/6/23 19:29:27

【Linux】系统文件IO·文件描述符fd

前言 C语言文件接口 C 语言读写文件 1.C语言写入文件 2.C语言读取文件 stdin/stdout/stderr 系统文件IO 文件描述符fd&#xff1a; 文件描述符分配规则&#xff1a; 文件描述符fd&#xff1a; 前言 我们早在C语言中学习关于如何用代码来管理文件&#xff0c;比如文件的…...

编程日记 2024/6/23 19:28:26

【计算机网络篇】数据链路层（6）共享式以太网_网络适配器_MAC地址

文章目录 &#x1f354;网络适配器&#x1f354;MAC地址&#x1f5d2;️IEEE 802局域网的MAC地址格式&#x1f4d2;IEEE 802局域网的MAC地址发送顺序&#x1f95a;单播MAC地址&#x1f95a;广播MAC地址&#x1f95a;多播MAC地址&#x1f50e;小结 &#x1f354;网络适配器 要将…...

编程日记 2024/6/23 19:25:24

导入别人的net文件报红问题sdk

1. 使用cmd命令 dotnet --info 查看自己使用的SDK版本 2.直接找到项目中的 global.json 文件&#xff0c;右键打开&#xff0c;直接修改版本为本机的SDK版本&#xff0c;就可以用了...

编程日记 2024/6/23 19:22:20

LangChain 介绍

In recent times, you would probably have heard of many AI applications, one of them being chatpdf.com. 在最近&#xff0c;你可能听说过很多的AI应用&#xff0c;chatpdf.com就是其中的一个。 On this website, you can upload your own PDF. After uploading, you ca…...

编程日记 2024/6/23 19:21:17

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/12/14 12:32:01

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/10/24 5:00:32

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/12/3 23:08:18

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/12/9 22:44:20

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/12/11 6:17:00

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/11/30 2:41:30

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/12/9 14:16:19