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

API-事件监听

news 2026/4/3 4:36:24

学习目标：

  • 掌握事件监听

学习内容：

  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

Symfony Monolog Bundle与现代日志系统：Sentry、Elasticsearch、Slack集成终极指南

Symfony Monolog Bundle与现代日志系统&#xff1a;Sentry、Elasticsearch、Slack集成终极指南 【免费下载链接】monolog-bundle Symfony Monolog Bundle 项目地址: https://gitcode.com/gh_mirrors/mo/monolog-bundle Symfony Monolog Bundle是Symfony框架中功能强大的…...

编程新知 2026/4/3 3:53:11

Local SDXL-Turbo应用案例：独立开发者构建个人AI绘画SaaS产品的技术栈选型

Local SDXL-Turbo应用案例&#xff1a;独立开发者构建个人AI绘画SaaS产品的技术栈选型 1. 引言&#xff1a;从想法到产品&#xff0c;一个开发者的选择 如果你是一名独立开发者&#xff0c;或者是一个小团队的负责人&#xff0c;想做一个自己的AI绘画工具&#xff0c;你可能会…...

编程新知 2026/4/3 3:41:01

百考通：AI精准驱动数据分析，让数据价值高效落地

在数字化浪潮席卷各行各业的今天&#xff0c;数据已成为核心生产要素&#xff0c;但如何从海量数据中挖掘价值、辅助决策&#xff0c;始终是企业与个人面临的核心难题。传统数据分析流程繁琐、技术门槛高、周期漫长&#xff0c;让许多非专业人士望而却步。百考通&#xff08;ht…...

编程新知 2026/4/3 3:33:00

2026 年4月深圳高精度 TOF 传感器，这些推荐值得关注！

随着科技的飞速发展&#xff0c;高精度TOF&#xff08;Time of Flight&#xff09;传感器在众多领域的应用越来越广泛。从智能家居到自动驾驶&#xff0c;从工业自动化到医疗成像&#xff0c;TOF传感器的市场需求呈现出爆发式增长。今天&#xff0c;我们就来聊聊2026年值得关注…...

编程新知 2026/4/3 3:30:59

Frappe-Gantt 甘特图进阶实战：从核心功能到企业级定制

1. Frappe-Gantt 甘特图在企业级项目中的核心价值 第一次接触Frappe-Gantt是在去年一个跨部门协作的电商大促项目中。当时我们需要一个能直观展示各环节时间节点的工具&#xff0c;试过几个商业软件后&#xff0c;最终选择了这个开源的轻量级解决方案。它最吸引我的地方在于——…...

编程新知 2026/4/3 2:58:23

Winbond W25N/W25M系列SPI NAND Flash驱动开发指南

1. Winbond W25N系列SPI NAND Flash驱动库技术解析Winbond W25N系列&#xff08;含W25N01GV、W25N02GV等&#xff09;与W25M系列&#xff08;如W25M02GW双芯片封装&#xff09;是工业级高可靠性SPI NAND Flash存储器&#xff0c;广泛应用于嵌入式系统中替代传统并行NAND或eMMC方…...

编程新知 2026/4/3 2:52:22

扩散模型对抗样本经典baselines

1. 流图&#xff1a;数据的河流 如果把传统的堆叠面积图想象成一块块整齐堆叠的积木&#xff0c;那么流图就像一条蜿蜒流淌的河流&#xff0c;河道的宽窄变化自然流畅&#xff0c;波峰波谷过渡平滑。 它特别适合展示多个类别数据随时间的变化趋势&#xff0c;尤其是当你想强调整…...

编程新知 2026/4/3 1:59:20

嵌入式开发语言选择：C与C++的实战对比

1. 嵌入式开发语言选择的核心考量在嵌入式系统开发领域&#xff0c;C和C的争论已经持续了数十年。作为一名在工业控制和消费电子领域工作多年的嵌入式工程师&#xff0c;我见证了从8位单片机到多核处理器的演进过程。选择开发语言绝非简单的技术偏好问题&#xff0c;而是需要综…...

编程新知 2026/4/3 1:59:20

基于胸部正位X光片的两阶段对比学习椎体压缩性骨折筛查框架文献速递-多模态医学影像最新进展

2026.4.2本研究提出一种基于胸部正位X光片的双阶段对比学习框架TADC-Net&#xff0c;通过模仿放射科医生的诊断流程&#xff0c;解决了器官遮挡和类间相似性等挑战&#xff0c;实现了椎体压缩性骨折的早期精准筛查&#xff0c;显著提升了诊断性能和临床辅助准确性。Title题目01…...

编程新知 2026/4/3 1:28:45

第 2 章 控制流 知识点精讲

2.1 布尔值核心知识点布尔值是表示真假的两种状态&#xff0c;是控制流的基础。True&#xff1a;表示真、成立、肯定。False&#xff1a;表示假、不成立、否定。关键特性布尔值是 Python 的基本数据类型之一&#xff0c;类型为 bool。它们是关键字&#xff0c;必须大写。在数值…...

编程新知 2026/4/3 1:08:40