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

【JavaScript】合体期功法——DOM（二）

article 2026/2/17 6:41:51

DOM

事件监听

事件：编程时系统内发生的动作或事情，例如用户在网页上单击一个按钮

事件监听：让程序检测是否产生事件，一旦事件触发，立即调用函数做出响应，也称为绑定事件或注册事件，如鼠标经过显示下拉菜单、点击播放轮播图等

语法：元素对象.addEventListener (' 事件类型 ', 要执行的函数)

事件监听三要素：

事件源：被事件触发的 DOM 元素，需先获取该 DOM 元素
事件类型：触发事件的方式，如鼠标单击（click）、鼠标经过（mouseover）等
事件调用的函数：事件触发后执行的具体操作（要做的事）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮</button><script>// 获取按钮元素const button = document.querySelector('button')// 为按钮添加点击事件button.addEventListener('click', function(){// 弹出警告框alert('你点击了按钮')})</script>
</body>
</html>

结果如下：

屏幕录制 2025-03-30 212736

注意事项：

事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次

案例

关闭广告

代码示例：

<!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: skyblue;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: pink;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head>
<body><div class="box">广告<div class="box1">X</div></div><script>// 获取事件源const box1 = document.querySelector('.box1')const box = document.querySelector('.box')// 事件侦听box1.addEventListener('click', function () {// 隐藏box.style.display = 'none'})</script>
</body>
</html>

结果如下：

屏幕录制 2025-03-30 214210

随机点名

代码示例：

<!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;}.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>let timeIdconst arr = ['张三','李四','王五','赵六','田七','宋八','周九','吴十']const qs = document.querySelector('.qs')const start = document.querySelector('.start')start.addEventListener('click',function () {timeId = setInterval(function () {const random = Math.floor(Math.random() * arr.length)//console.log(arr[random]);qs.innerHTML = arr[random]},35)})const end = document.querySelector('.end')end.addEventListener('click',function () {clearInterval(timeId)})</script>
</body>
</html>

结果如下：

屏幕录制 2025-03-30 221210

事件监听版本

DOM 发展历史：

DOM L0：DOM 发展的第一个版本，L 代表 level
DOM L1：1998 年 10 月 1 日成为 W3C 推荐标准
DOM L2：使用 addEventListener 注册事件
DOM L3：在 DOM 2 级事件基础上重新定义事件，新增部分新事件类型

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

DOM L2：
事件源.addEventListener (事件，事件处理函数)

区别：

on方式绑定的事件处理函数会被覆盖
addEventListener方式可多次绑定同一事件，支持更多事件特性，推荐使用

事件类型

鼠标事件：触发方式为鼠标触发，包含 click（鼠标点击）、mouseenter（鼠标经过）、mouseleave（鼠标离开）

焦点事件：触发与表单光标相关，包含 focus（获得焦点）、blur（失去焦点）

键盘事件：触发方式为键盘操作，包含 keydown（键盘按下触发）、keyup（键盘抬起触发）

文本事件：由表单输入触发，包含 input（用户输入事件）

代码示例：

<!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: 100px;height: 100px;background-color: skyblue;}</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>

结果如下：

【JavaScript】合体期功法——DOM（二）

目录 DOM事件监听案例关闭广告随机点名事件监听版本事件类型 DOM 事件监听事件：编程时系统内发生的动作或事情，例如用户在网页上单击一个按钮事件监听：让程序检测是否产生事件，一旦事件触发，立即调用函数做出响应…...

编程日记 2026/1/13 1:34:29

23种设计模式中的中介者模式

定义了一个中介对象来封装一系列对象之间的交互。中介者使各对象直接不再显示地相互引用，从而使其松散耦合，且可以独立地改变它们之间的交互。通过引入一个中介者对象，来协调和封装多个对象之间的交互，从而降低他们之间的耦合度。…...

编程日记 2026/2/15 19:42:12

量子计算：开启未来计算的新纪元

一、引言在当今数字化时代，计算技术的飞速发展深刻地改变了我们的生活和工作方式。从传统的电子计算机到如今的高性能超级计算机，人类在计算能力上取得了巨大的进步。然而，随着科技的不断推进，我们面临着越来越多的复杂问题&…...

编程日记 2025/5/13 7:23:36

Docker 的实质作用是什么

Docker 的实质作用是什么目录 Docker 的实质作用是什么**1. Docker 的实质作用****2. 为什么使用 Docker？****（1）解决环境一致性问题****（2）提升资源利用率****（3）简化部署与扩展****（4）加速开发与协作****3. 举例说明****总结**Docker 的实质是容器化平台，核心作用…...

编程日记 2026/2/12 12:32:15

Assembly语言的装饰器

Assembly语言的装饰器：灵活高效的代码复用引言在软件开发中，代码复用和模块化是两个至关重要的概念。它们不仅使得代码的维护变得更为简单，而且能极大提升开发效率。在高级语言中，装饰器是一种非常受欢迎的设计模式&#xff0…...

编程日记 2025/4/19 13:10:37

VITA 模型解读，实时交互式多模态大模型的 pioneering 之作

写在前面：实时交互llm 今天回顾一下多模态模型VITA，当时的背景是OpenAI 的 GPT-4o 惊艳亮相，然而，当我们将目光投向开源社区时，却发现能与之匹敌的模型寥寥无几。当时开源多模态大模型（MLLM），大多在以下一个或多个方面存在局限：模态支持不全：大多聚焦于文本和图像，…...

编程日记 2025/10/19 10:55:09

自学-408-《计算机网络》（总结速览）

文章目录第一章计算机网络概述1. 计算机网络的定义2. 计算机网络的基本功能3. 计算机网络的分类4. 计算机网络的层次结构5. 计算机网络的协议6. 计算机网络的组成部分7. 计算机网络的应用8. 互联网的概念物理层的主要功能第二章数据链路层和局域网1. 数据链路层的功能2. 局…...

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

AlphaFold3 feature_pipeline 模块 FeaturePipeline 类是一个封装类，通过调用函数np_example_to_features 实现整个数据处理流程。源代码： def np_to_tensor_dict(np_example: Mapping[str, np.ndarray],features: Sequence[str], ) -> TensorDict:"""C…...

编程日记 2025/5/22 9:20:05

【质量管理】纠正、纠正措施和预防的区别与解决问题的四重境界

“质量的定义就是符合要求”，我们在文章【质量管理】人们对于质量的五个错误观念-CSDN博客中提到过，这也是质量大师克劳士比所说的。“质量的系统就是预防”，防止出现产品不良而造成的质量损失。质量问题的解决可以从微观和宏观两个方面来考…...

编程日记 2026/2/1 20:46:42

Java面试黄金宝典24

1. 什么是跳表定义跳表（Skip List）是一种随机化的数据结构，它基于有序链表发展而来，通过在每个节点中维护多个指向其他节点的指针，以多层链表的形式组织数据。其核心思想是在链表基础上增加额外层次，每…...

编程日记 2025/5/28 21:47:18

Windows 11系统下Kafka的详细安装与启动指南(JDK 1.8)

1. 安装前准备在Windows 11系统中安装Kafka之前，需要确保满足以下条件： 1.1 系统要求 Windows 11操作系统（64位）至少4GB内存（建议8GB或更高）至少5GB可用磁盘空间管理员权限1.2 所需工具浏览器（用于下载软件）解压工具（如7-Zip、WinRAR，Windows 11自带的解压功能也…...

编程日记 2025/4/20 14:37:18

树莓派超全系列文档--(16)无需交互使用raspi-config工具其三

无需交互使用raspi-config工具其三无需交互的 raspi-configAdvanced optionsExpand filesystemNetwork interface namesNetwork proxy settingsBoot orderBootloader versionWaylandAudio config Update 文章来源： http://raspberry.dns8844.cn/documentation 原文…...

编程日记 2025/4/19 20:33:15

【蓝桥杯】算法笔记1

1.暴力枚举给定一个正整数n，请找出所有满足a + b = n的整数对(a, b)，其中a和b都是正整数，且a ≤ b。输入格式：一个正整数n (1 ≤ n ≤ 10⁶) 输出格式：所有符合条件的(a, b)对，每行一对，按a的升序排列。如果没有符合条件的对，输出"No solution"。问题分…...

编程日记 2025/4/19 19:40:51

爱因斯坦求和 torch

目录向量点积矩阵乘法矩阵转置向量转换相机坐标系在 Python 的科学计算库（如 NumPy）中，einsum 是一个强大的函数，它可以简洁地表示各种张量运算。下面是几个不同类型的使用示例： 向量点积向量点积是两个向量…...

编程日记 2025/11/25 19:14:43

Linux命令-sed指令

sed命令参数： 基本参数 -n：抑制默认输出，只显示匹配的行。 -e：指定 sed 脚本。 -i：直接修改文件内容。 -f：指定包含 sed 脚本的文件。 -r：启用扩展正则表达式。常用操作 s：替换字符…...

编程日记 2025/11/17 15:28:29

新手SEO优化实战快速入门

内容概要对于SEO新手而言，系统化掌握基础逻辑与实操路径是快速入门的关键。本指南以站内优化为切入点，从网站结构、URL设计到内链布局，逐层拆解搜索引擎友好的技术框架；同时聚焦关键词挖掘与内容策略，结合工具使用与…...

编程日记 2026/2/9 16:01:48

如何使不同的窗体控件，适应不同分辨率的屏幕？

问题当屏幕分辨率提高或降低时，原分辨率显示正常的控件，将变得很小或很大，字体也变得太大或太小。解决办法当分辨率变化时，采用递归的方法，对所有的控件放大或缩小。 public static void MainForm_Load(object s…...

编程日记 2026/2/1 0:10:45

sqli-labs靶场 less 11

文章目录 sqli-labs靶场less 11 POS联合注入 sqli-labs靶场每道题都从以下模板讲解，并且每个步骤都有图片，清晰明了，便于复盘。 sql注入的基本步骤注入点注入类型字符型：判断闭合方式 （‘、"、’、“”&…...

编程日记 2026/2/7 7:43:26

tomcat部署项目打开是404？

问题描述今天在帮助一个小伙伴解决问题的时候部署成功了就是打不开总是404 他这个项目是公司的一个18年的项目巨老！！！ HTTP状态 404 - 未找到类型状态报告描述源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示…...

编程日记 2026/2/1 10:52:01

[Linux]解决虚拟机 ubantu系统下网络的问题

问题来源：打开ubantu发现网络连接标识消失解决步骤： 重新安装，前面操作无效切换桥接模式、直连手机网络已解决：...

编程日记 2026/2/1 10:37:33

如何使用stable diffusion 3获得最佳效果

参考：How to get the best results from Stable Diffusion 3 Scaling Rectified Flow Transformers for High-Resolution Image Synthesis prompting SD3 不再受限于CLIP的最长77个token的长度限制，可以输入更长的prompt。 （两个CLIP模型的…...

编程日记 2026/2/2 10:34:07

SakuraCat（2）Endpoint

Endpoint 功能概述监听指定端口（默认是 8080）的客户端连接。接受客户端连接后，为每个连接创建一个新的线程进行处理。使用 Processor 类来处理客户端的请求和响应。 package com.SakuraCat.connector.protocolHandler;import com.SakuraC…...

编程日记 2026/2/1 11:48:56