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

0207 事件

news 2025/7/11 5:54:45

事件监听

事件监听版本

事件类型

事件

概念

事件在编程时系统内发生的动作或者发生的事情

例子

点击按钮

鼠标经过

拖拽鼠标

事件监听（注册事件，绑定事件）

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

语法

元素.addEventListener('事件',要执行的函数)

事件监听三要素

事件源：哪个DOM元素被事件触发了，要获取DOM元素

事   件：用什么方式触发，比如:鼠标单击click，鼠标经过mouseover

事件调用什么函数：要做什么

代码

    <button>点击我</button><div>经过我</div><script>//1获取按钮元素let btn = document.querySelector("button")//2事件源btn.addEventListener("click", function () {alert("努力学习啊啊啊啊啊啊啊啊")})let box=document.querySelector('div')box.addEventListener("mouseover", function () {alert("努力挣钱啊啊啊啊啊啊啊啊")})</script>

例子  关闭二维码

二维码旁边有一个关闭按钮，点击然后关闭二维码

    <style>* {margin: 0;padding: 0;}.erweima {position: relative;width: 160px;height: 160px;margin: 100px auto;border: 1px solid #ccc;}.erweima i {position: absolute;left: -13px;top: 0;width: 10px;height: 10px;border: 1px solid #ccc;font-size: 12px;line-height: 10px;color: #ccc;font-style: normal;cursor: pointer;}</style></head><body><div class="erweima"><img src="./images/code.png" alt="" /><i class="close_btn">x</i></div><script>//1获取元素let btn = document.querySelector(".close_btn")let code = document.querySelector(".erweima")//2事件监听btn.addEventListener("click", function () {code.style.display = "none"})</script></body>

例子  随机点名

    <style>div {width: 200px;height: 40px;border: 2px solid brown;text-align: center;line-height: 40px;}button {margin-left: 65px;}</style></head><body><div></div><button>click this</button><script>let box = document.querySelector("div")let btn = document.querySelector("button")function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}let arr = ["张三", "李四", "王五", "王朝", "马汉"]btn.addEventListener('click', function () {let random = getRandom(0, arr.length - 1)box.innerHTML = arr[random]})</script></body>

例子  随机点名完善

    <style>div {width: 200px;height: 40px;border: 5px solid brown;text-align: center;line-height: 40px;}button {margin-left: 65px;}</style></head><body><div>点击下面按钮开始抽人</div><button>click this</button><script>let box = document.querySelector("div")let btn = document.querySelector("button")function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}let arr = ["张三", "李四", "王五", "王朝", "马汉"]btn.addEventListener("click", function () {let random = getRandom(0, arr.length - 1)box.innerHTML = arr[random]//抽过的就删除arr.splice(random, 1)//抽完按钮就禁用，数组最后一个就禁用if (arr.length === 0) {btn.disabled = truebtn.innerHTML='所有人都已经抽过了'}})</script></body>

事件类型

鼠标事件

鼠标触发

click 鼠标点击

mouseover鼠标经过

mouseleave鼠标离开

焦点事件

表单获得光标

focus获得焦点

blur失去焦点

键盘事件

键盘触发

KeyDown键盘按下触发

keyup键盘抬起触发

文本事件

表单输入触发

input用户输入事件

例子  小米搜索框

    <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: 5px 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>//1获取元素inputlet search = document.querySelector("input")//2获取元素.result-listlet list = document.querySelector(".result-list")//3事件监听，获得光标事件search.addEventListener("focus", function () {//显示下拉菜单list.style.display = "block"//文本框变色search.classList.add("search")})</script></body>

例子  输入文字，计算用户输入的字数

  <body><div class="w"><div class="controls"><img src="images/tip.png" alt="" /><br /><textareaplaceholder="说点什么吧..."id="area"cols="30"rows="10"maxlength="200"></textarea><div><span class="useCount">0</span><span>/</span><span>200</span><button id="send">发布</button></div></div><div class="contentList"><ul></ul></div></div><script>//1获取元素文本域arealet area = document.querySelector("#area")//2获取字符长度usecountlet useCount = document.querySelector(".useCount")//3监听绑定事件，用户输入的inputarea.addEventListener("input", function () {useCount.innerHTML = area.value.length})</script></body>

例子  全选文本

    <style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style></head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll" /><span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck" /></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck" /></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck" /></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>//let all = document.querySelector("#checkAll")//let cks = document.querySelectorAll(".ck")//let span = document.querySelector("span")//点全选按钮，下面的小按钮都选上all.addEventListener("click", function () {for (let i = 0; i < cks.length; i++) {cks[i].checked = all.checked}//如果点击全选了，全选文字就变成取消，没有点击就是全选if (all.checked === true) {span.innerHTML = "取消"} else {span.innerHTML = "全选"}})//点击下面小按钮，全选按钮被选for (let i = 0; i < cks.length; i++) {cks[i].addEventListener("click", function () {for (let j = 0; j < cks.length; j++) {if (cks[j].checked === false) {all.checked === falsereturn}}//all.checked = true})}</script></body>

例子  购物车加减操作

  <style>div {width: 80px;}input[type=text] {width: 50px;height: 44px;outline: none;border: 1px solid #ccc;text-align: center;border-right: 0;}input[type=button] {height: 24px;width: 22px;cursor: pointer;}input {float: left;border: 1px solid #ccc;}</style>
</head><body><div><input type="text" id="total" value="1" readonly><input type="button" value="+" id="add"><input type="button" value="-" id="reduce" disabled><script>// 1. 获取元素  三个let total = document.querySelector('#total')let add = document.querySelector('#add')let reduce = document.querySelector('#reduce')// 2. 点击加号 事件侦听  add.addEventListener('click', function () {// console.log(typeof total.value)// total.value = total.value + 1// i++   隐式转换// i = i + 1 total.value++reduce.disabled = false})// 3. 点击减号 事件侦听  reduce.addEventListener('click', function () {total.value--if (total.value <= 1) {reduce.disabled = true}})</script></div>
</body

相关文章：

0207 事件

事件监听事件监听版本事件类型事件概念事件在编程时系统内发生的动作或者发生的事情例子点击按钮鼠标经过拖拽鼠标事件监听&#xff08;注册事件&#xff0c;绑定事件&#xff09;让程序员检测是否有事件产生&#xff0c;一旦有事件触发&#xff0c;就立即调用一个函数做出响应…...

编程日记 2023/2/10 19:38:55

SpringBoot整合Swagger

目录 一、swagger介绍 二、springboot集成swagger 1、创建一个springboot-web项目 2、导入相关依赖 3、编写一个Hellow工程 4、配置swagger --->config 5、启动springboot工程 6、配置swagger信息 7、配置swagger扫描接口 8、如何设置Swagger在生产环境中使用&…...

编程日记 2023/2/10 19:37:48

20230210英语学习

Why Do So Many Cats Have White ‘Socks’ on Their Paws? 为什么好多猫咪脚上都“穿着白袜子”&#xff1f; If you see a house cat, the odds are high that it will have white paws, a look that many owners affectionately call "socks."But socks are rar…...

编程日记 2023/2/10 19:36:41

【图像处理OpenCV(C++版)】——4.5 全局直方图均衡化

前言&#xff1a; &#x1f60a;&#x1f60a;&#x1f60a;欢迎来到本博客&#x1f60a;&#x1f60a;&#x1f60a; &#x1f31f;&#x1f31f;&#x1f31f; 本专栏主要结合OpenCV和C来实现一些基本的图像处理算法并详细解释各参数含义&#xff0c;适用于平时学习、工作快…...

编程日记 2023/2/10 19:35:32

2022年API安全研究报告

目录 导读 2022年API安全风险概况 2022年平均每月遭受攻击的API数量超21万...

编程日记 2023/2/10 19:34:25

【内网安全-横向移动】基于SMB协议-PsExec

目录 一、SMB协议 1、简述&#xff1a; 2、工具&#xff1a; 二、PsExec 1、简述&#xff1a; 2、使用&#xff1a; 1、常用参数&#xff1a; 2、情况&#xff1a; 3、插件 三、PsExec&#xff08;impacket&#xff09; 1、简述&#xff1a; 1、impacket&#xff1…...

编程日记 2023/2/10 19:33:18

whistle 一个神奇的前端调试工具（抓包\代理工具）

在进行前端开发过程中&#xff0c;我们常常需要对一些接口进行处理&#xff0c;以及当后端接口没有弄好需要我们mock一些假数据&#xff0c;针对这些场景&#xff0c;我们就可以使用whistle 来解决。首先&#xff0c;我们要知道能满足我们需求的工具有很多&#xff0c;例如&…...

编程日记 2023/2/10 19:32:07

node.js下载和vite项目创建以及可能遇到的错误

目录 一、node.js的下载 1、去官网下载 节点.js (nodejs.org) 2、下载过程 第一步&#xff1a; 第二步&#xff1a; 第三步&#xff1a; 第四步&#xff1a; 第五步: 二、vite项目的创建&#xff08;使用的工具是Hbuilder x&#xff09; 第一步&#xff1a; 出现报错…...

编程日记 2023/2/10 19:31:00

如何使用python画一个爱心

1 问题 如何使用python画一个爱心。 2 方法 桌面新建一个文本文档&#xff0c;文件后缀改为.py&#xff0c;输入相关代码ctrls保存&#xff0c;关闭&#xff0c;最后双击运行。 代码清单 1 from turtle import * def curvemove(): for i in range(200): right(1) …...

编程日记 2023/2/10 19:29:52

1 Flutter UI Container和 Text 和图片组件

一 Text 组件Text 文本组件的一些属性如下body: const Text("this is leonardo fibonacci",// 文本对齐的方式textAlign: TextAlign.center,// 文本方向textDirection: TextDirection.rtl,// 字体显示最大的行数maxLines: 2,// 文字超出屏幕之后的显示方式 ellipsi…...

编程日记 2023/2/10 19:28:43

【Hello Linux】 Linux基础命令（持续更新中）

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;介绍Linux的基础命令 Linux基础命令ls指令lsls -als -dls -ils -sls -lls -nls -Fls -rls -tls -Rls -1总结思维导图pwd指令whoami指令…...

编程日记 2023/2/10 19:27:35

记录一下slf4j2打印一直不成功

整理一个之前的老项目问题&#xff0c;发现日志一直打印不出来&#xff0c;本地启动发现了第一个问题日志如下&#xff1a;此处可发现&#xff0c;jar包冲突问题&#xff0c;去掉冲突的jar包即可&#xff0c;此处不做过多赘述。然后发现了重新启动项目&#xff0c;发现jar包冲突…...

编程日记 2023/2/10 19:26:24

【安全知识】——对Linux密码文件的处理

作者名&#xff1a;白昼安全主页面链接&#xff1a; 主页传送门创作初心&#xff1a; 一切为了她座右铭&#xff1a; 不要让时代的悲哀成为你的悲哀专研方向&#xff1a; web安全&#xff0c;后渗透技术每日emo&#xff1a;他既乐观又悲观&#xff0c;生活也一无是处昨天在挖掘…...

编程日记 2023/2/10 19:25:16

动手深度学习笔记（四十七）8.3. 语言模型和数据集

动手深度学习笔记（四十七）8.3. 语言模型和数据集 8.3. 语言模型和数据集8.3. 语言模型和数据集 在 8.2节中， 我们了解了如何将文本数据映射为词元， 以及将这些词元可以视为一系列离散的观测，例如单词或字符。 假设长度为 T T T的文本序列中的词元依次为 x 1 , x...

编程日记 2023/2/10 19:24:09

URL编码和Base64编码

URL编码和Base64编码前言一、URL编码1. URLEncoder和URLDecoder2. URL编码规则3. Javascript 原生提供三对 Url编码 的函数3.1 三对函数的不同点二、Base64编码1. Base64编码规则2. Base64编码使用3. JavaScript 原生提供两个 Base64 相关的方法总结前言 数据操作过程中&#…...

编程日记 2023/2/10 19:23:00

Flink 滚动窗口、滑动窗口详解

1 滚动窗口(Tumbling Windows) 滚动窗口有固定的大小&#xff0c;是一种对数据进行“均匀切片”的划分方式。窗口之间没有重叠&#xff0c;也不会有间隔&#xff0c;是“首尾相接”的状态。如果我们把多个窗口的创建&#xff0c;看作一个窗口的运动&#xff0c;那就好像它在不…...

编程日记 2023/2/10 19:21:52

想要精通算法和SQL的成长之路 - 柱状图中最大的矩形

想要精通算法和SQL的成长之路 - 柱状图中最大的矩形前言一. 柱状图中最大的矩形前言 想要精通算法和SQL的成长之路 - 系列导航 一. 柱状图中最大的矩形 原题链接 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。求…...

编程日记 2023/2/10 19:20:46

网络安全实验室5.上传关

5.上传关 1.请上传一张jpg格式的图片 url&#xff1a;http://lab1.xseclab.com/upload1_a4daf6890f1166fd88f386f098b182af/ 上传一张后缀名为jpg的图片&#xff0c;上传抓包修改后缀名为别的&#xff0c;s或者直接删掉&#xff0c;放包 得到key is IKHJL9786#$%^& 2.请…...

编程日记 2023/2/10 19:19:38

JavaScript 严格模式(use strict)

文章目录JavaScript 严格模式(use strict)使用 "use strict" 指令严格模式声明严格模式的限制保留关键字JavaScript 严格模式(use strict) JavaScript 严格模式&#xff08;strict mode&#xff09;即在严格的条件下运行。 使用 “use strict” 指令 “use strict”…...

编程日记 2023/2/10 19:18:27

硬件设计—高性能ADC前端电路

高性能模数转换器&#xff08;ADC&#xff09;一般对系统的性能有非常高的要求&#xff0c;而AD芯片的“前端”的输入电路设计对ADC系统的的性能有非常大的影响。以下主要介绍了ADC芯片前端输入使用放大器和变压器各自的优势。 1、放大器和变压器根本区别 放大器是有源器件&am…...

编程日记 2023/2/10 19:17:15

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/7/7 18:23:46

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/6/27 7:21:20

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/7/8 20:29:33

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/7/9 18:19:09

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/7/8 15:06:29

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/7/3 9:50:42

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/7 14:25:55

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/7/10 11:55:53

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/7/10 8:45:22

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/6/23 2:50:47