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

API-事件监听

news 2025/11/3 21:50:39

学习目标：

  • 掌握事件监听

学习内容：

  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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/3 20:05:26

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/11/3 21:35:01

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/10/31 8:26:37

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/10/14 4:14:14

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/11/3 4:13:05

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2025/11/2 0:32:25

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/10/24 17:27:31

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/10/26 14:17:59

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/10/28 7:44:13