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

〖大前端 - 基础入门三大核心之JS篇㊵〗- DOM事件监听及onxxx的使用

news 2026/2/20 0:49:16
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
  • 作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
  • 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书

文章目录

  • ⭐ 事件监听
    • 🌟 onxxxx属性
      • ✨ 常见的鼠标事件监听
      • ✨ 常见的键盘事件监听
      • ✨ 常见的表单事件监听
      • ✨ 常见的页面事件监听

⭐ 事件监听

DOM允许我们书写JavaScript代码以让HTML元素对事件作出反应

事件：用户与网页的交互动作（如：当用户点击元素时、当鼠标移动到元素上时、当文本空的内容被改变时、当键盘在文本框中被按下时、当网页已加载完毕时。。。）

监听：让极端及随时能够发现这个事件，从而执行程序员预先编写的一些程序

设置事件监听的方法主要有onxxxx和addEventListener()两种


🌟 onxxxx属性

设置onxxxx属性是最简单的设置事件监听的方法。比如onclick属性，代表当鼠标单击事件。

示例代码：

oBox.onclick = function (){//点击盒子时，将执行这里的语句
}

举个例子，点击盒子弹出一个alert:

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 200px;height: 200px;background-color: #ccc;}</style>
</head>
<body><div id="box"></div><script>var oBox = document.getElementById('box');oBox.onclick = function () {alert('点击盒子弹出这个弹框');}</script>
</body>
</html>

image-20230418154635209


✨ 常见的鼠标事件监听

事件名事件描述
onclick当鼠标单机某个对象
ondblclick当鼠标双击某个对象
onmousedown当某个鼠标按键在某个对象上被按下
onmouseup当某个鼠标按键在某个对象上被松开
onmousemove当某个鼠标按键在某个对象上被移动
onmouseenter当鼠标进入某个对象（相似事件onmouseover）
onmouseleave当鼠标离开某个对象（相似事件onmouseout）
onmousewheel当鼠标滚轮滚动

一些鼠标事件监听的示例代码：

oBox.onclick = function () {console.log('鼠标单击');
}
oBox.ondblclick = function () {console.log('鼠标双击');
}
oBox.onmousedown = function () {console.log('鼠标按下');
}
oBox.onmouseup = function () {console.log('鼠标松开');
}
oBox.onmousemove = function () {console.log('鼠标移动');
}
oBox.onmouseenter = function () {console.log('鼠标移入');
}
oBox.onmouseleave = function () {console.log('鼠标移出');
}
oBox.onmousewheel = function () {console.log('鼠标滚轮滚动');
}

image-20230419105841276


✨ 常见的键盘事件监听

事件名事件描述
onkeypress当某个键盘的键被按下（系统按钮（如箭头键、退格键…）和功能键（如F1、F2…）无法得到识别）
onkeydown当某个键盘的键被按下（系统按钮和功能键可以识别，并且会先于onkeypress发生）
onkeyup当某个键盘的键被松开

难点在于onkeypress和onkeydown的区别

一些键盘事件监听的示例代码：

<body>姓名：<input type="text" id="nameField"><script>var nameField = document.getElementById('nameField');nameField.onkeydown = function () {console.log('键盘按钮被按下');};nameField.onkeypress = function () {console.log('键盘按钮被按下（不能识别箭头退格等）');};nameField.onkeyup = function () {console.log('键盘按钮松开');};</script>
</body>

image-20230419133835864


✨ 常见的表单事件监听

事件名事件描述
onchange当用户改变了域的内容（比如修改文本框的内容，然后鼠标在空白处点击一下时会修改完成，此时会触发该事件）
oninput当用户正在改变域的内容（重点是正在，非常类似onkeydown的功能）
onfocus当某元素获得焦点（比如tab键或鼠标点击）
onblur当某元素失去焦点
onsubmit当表单被提交
onreset当表单被重置

先来了解一个扩展小知识——获取表单的dom节点：

先通过访问元素的常见方法获取到这个表单，再通过表单+打点的方式获取到其中的子节点

示例代码：

<body><form action="" id="myform"><p>姓名：<input type="text" name="nameField"></p><p>年龄：<input type="text" name="ageField"></p></form><script>var myform = document.getElementById('myform');  //先获取到这个表单var nameField = myform.nameField;   //再通过表单+打点的方式获取到其中的子节点var ageField = myform.ageField;  //再通过表单+打点的方式获取到其中的子节点</script>
</body>

一些表单事件监听的示例：

<body><form action="" id="myform"><p>姓名：<input type="text" name="nameField"></p><p>年龄：<input type="text" name="ageField"></p><p><input type="submit" name="submitField"></p><p><input type="reset" name="resetField"></p></form><script>var myform = document.getElementById('myform');  //先获取到这个表单var nameField = myform.nameField;   //再通过表单+打点的方式获取到其中的子节点var ageField = myform.ageField;  //再通过表单+打点的方式获取到其中的子节点nameField.onchange = function () {console.log('您修改了姓名');};nameField.oninput = function () {console.log('您正在修改姓名');};ageField.onfocus = function () {console.log('年龄文本框获得焦点');};ageField.onblur = function () {console.log('年龄文本框失去焦点');};myform.onsubmit = function () {alert('您的表单被提交');};myform.onreset = function () {alert('您的表单被重置');};</script>
</body>

image-20230419142310320


✨ 常见的页面事件监听

onload当页面或图像被加载完成
onunload当用户退出页面
事件名事件描述

示例代码：

window.onload = function () {console.log('页面加载完成');
};
window.onunload = function () {console.log('退出页面');
};

更详细的页面事件监听在学到BOM时再介绍。

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊵〗- DOM事件监听及onxxx的使用

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…...

编程日记 2023/11/22 1:08:27

解锁潜力：创建支持Actions接口调用的高级GPTs

如何创建带有Actions接口调用的GPTs 在本篇博客中&#xff0c;我们将介绍如何创建一个带有Actions接口调用的GPTs &#xff0c;以及如何进行配置和使用。我们将以 https://chat.openai.com/g/g-GMrQhe7ka-gptssearch 为例&#xff0c;演示整个过程。 Ps: 数据来源&#xff1a…...

编程日记 2023/11/22 1:07:26

【发明专利】天洑软件再度收获六项国家发明专利授权

近日&#xff0c;南京天洑软件有限公司再度收获行业内六项国家发明专利授权&#xff0c;专利名称为&#xff1a;一种发电机绕组温度预警方法及装置&#xff08;专利号&#xff1a;ZL 2022 1 1525605.3&#xff09;&#xff0c;一种CSTR系统的控制方法及装置&#xff08;专利号&…...

编程日记 2023/11/22 1:06:25

Netty源码学习4——服务端是处理新连接的netty的reactor模式

零丶引入 在前面的源码学习中&#xff0c;梳理了服务端的启动&#xff0c;以及NioEventLoop事件循环的工作流程&#xff0c;并了解了Netty处理网络io重要的Channel &#xff0c;ChannelHandler&#xff0c;ChannelPipeline。 这一篇将学习服务端是如何构建新的连接。 一丶网络包…...

编程日记 2023/11/22 1:05:24

8、信息打点——系统篇端口扫描CDN服务负载均衡WAF

文章目录 获取网络信息获取服务信息获取阻碍信息 获取网络信息 服务器厂商信息&#xff08;阿里云&#xff1f;腾讯云&#xff1f;&#xff09; 收集的原因&#xff1a;如果服务器架设在云上&#xff0c;不同厂商的一些配置信息不同。判断方法&#xff1a;直接在ip/域名网站搜相…...

编程日记 2023/11/22 1:03:22

Ant Design for Figma设计系统组件库 支持变量 非社区版

Ant Design for Figma 是基于 Ant Design 设计系统的 Figma 组件库&#xff0c;提供丰富的 UI 组件和交互功能&#xff0c;帮助设计师快速构建高质量的 Figma 设计稿。 Ant Design for Figma 继承了 Ant Design 的设计理念和风格&#xff0c;提供丰富的 UI 组件和交互功能&…...

编程日记 2023/11/22 1:02:22

k8s的高可用集群搭建，详细过程实战版

kubernetes高可用集群的搭建 前面介绍过了k8s单master节点的安装部署 今天介绍一下k8s高可用集群搭建 环境准备&#xff1a; vip &#xff1a;192.168.121.99 keeplive master01&#xff1a;192.168.121.153 centos7 master02&#xff1a;192.168.121.154 centos7 master03&a…...

编程日记 2023/11/22 1:01:21

【20年扬大真题】编写对数组求逆的递归算法

【20年扬大真题】 编写对数组求逆的递归算法 void swap(int* a, int* b) {int tmp *b;*b *a;*a tmp; } void Ni(int arr[],int left,int right) {if (left > right) {return;}swap(&arr[left], &arr[right]);Ni(arr, left 1, right - 1); } int main() {int ar…...

编程日记 2023/11/22 1:00:19

日志门面slf4j与常用的日志框架Log4j，Logback和Log4j2

slf4j 是众多日志框架接口的集合(俗称日志门面)&#xff0c;它不负责具体的日志实现&#xff0c;只在编译时负责寻找合适的日志框架进行绑定,各日志框架通过扩展jar包中的适配器与slf4j建立适配 SLF4J可以和Log4j、Logback、Log4j2、JUL等日志框架配合使用&#xff0c;这里主要…...

编程日记 2023/11/22 0:58:16

使用ssh在本地环境（Windows）连接虚拟机以及其中的docker容器

配置虚拟机防火墙 防火墙的一系列操作需要root权限&#xff0c;默认是没有root密码的&#xff0c;所以首先需要设置root密码&#xff1a; sudo passwd root按提示完成root密码设置 切换到root账户 su root启用22端口并重启防火墙 firewall-cmd --permanent --add-port22/tc…...

编程日记 2023/11/22 0:57:15

没收到Win11 23H2正式版的推送怎么升级到23H2

没收到Win11 23H2正式版的推送怎么升级到23H2&#xff1f;用户反映自己没有收到Win11 23H2正式版的更新推送&#xff0c;又想升级为23H2版本。接下来小编给大家详细介绍不同的升级方法&#xff0c;帮助更多的用户完成Win11 23H2系统的更新&#xff0c;升级后就能体验到Win11 23…...

编程日记 2023/11/22 0:56:14

SpringBoot整合Redis使用基于注解的缓存

环境准备 注解 EnableCaching CacheConfig CacheConfig 提供了一种在类级别共享公共缓存相关设置的机制。 | 参数 | 作用 | | | — | — | — | | cacheNames | 使用在类上的默认缓存名称 | | | keyGenerator | 用于类的默认KeyGenerator的bean名称 | | | cacheManager | 自定…...

编程日记 2023/11/22 0:55:12

STM32：时钟树原理概要

在一般情况下只要在CubeIDE中将RCC下的高速时钟源设置成晶振&#xff0c;随后在时钟配置中把HCLK设置到最大频率&#xff08;比如STM32F103的最高频率是72MHZ &#xff09;&#xff0c;CubeIDE就会帮我们自动调节其它参数到合适的值。这样我们芯片就可以全速运行了。 一、时钟信…...

编程日记 2023/11/22 0:53:10

Python量化--诺贝尔奖获得者布莱克-斯科尔斯期权定价公式在日间交易中的应用

“我们不能让你在不了解一点期权定价基础知识的情况下离开麻省理工学院，”Andrew Lo 教授在麻省理工学院的 15.401 金融理论课上对学生们说道。虽然我还不是麻省理工学院的学生，但这句话给了我一个直觉：期权定价一定极其重要。由于像麻省理工学院毕业生这样的精英金融人士都…...

编程日记 2023/11/22 0:50:06

Redis 5 种基本数据类型详解

Redis 共有 5 种基本数据类型&#xff1a;String&#xff08;字符串&#xff09;、List&#xff08;列表&#xff09;、Set&#xff08;集合&#xff09;、Hash&#xff08;散列&#xff09;、Zset&#xff08;有序集合&#xff09;。 这 5 种数据类型是直接提供给用户使用的&…...

编程日记 2023/11/22 0:49:03

LeetCode8-字符串转换整数(atoi)

目录 1.大神解法2.我的辣鸡解法:3.整数相加的溢出判断(chaGPT代码)4.整数相乘溢出判断(chatGPT代码) 到目前为止比较简单容易理解的一个代码: 参考链接: &#x1f517;:【8. 字符串转换整数 String to Integer (atoi) 【LeetCode 力扣官方题解】-哔哩哔哩】 1.大神解法 累乘和…...

编程日记 2023/11/22 0:48:02

算法分析与设计课后练习22

设W(5,7,10,12,15,18,20)和M35&#xff0c;使用过程SUMOFSUB找出W种使得和数等于M的全部子集并画出所生成的部分状态空间树...

编程日记 2023/11/22 0:47:01

芯片IO口不加电阻会怎样？

芯片IO口不加电阻会怎样&#xff1f; 可能会导致以下几个后果&#xff1a; 1.高电流问题&#xff0c;IO口没有电阻限流&#xff0c;当与外部设备直接连接时&#xff0c;就可能会导致过大的电流流过IO口&#xff0c;这就可能损坏IO口&#xff0c;引起短路或烧坏其它电路组件。像…...

编程日记 2023/11/22 0:46:00

智慧化工园区信息化整体解决方案：PPT全53页，附下载

关键词&#xff1a;智慧化工园区建设方案&#xff0c;智慧化工园区建设规范&#xff0c;智慧化工园区建设指南 一、售智慧化工园区建设背景 随着工业化、信息化和数字化进程的加速&#xff0c;化工园区面临着越来越多的挑战&#xff0c;如安全生产、环境保护、能源消耗等问题…...

编程日记 2023/11/22 0:44:59

深度学习之三（卷积神经网络--Convolutional Neural Networks，CNNs）

概念 卷积神经网络（Convolutional Neural Networks，CNNs）是一种特殊的神经网络结构，专门用于处理具有网格状结构（如图像、音频）的数据。CNN 在计算机视觉领域取得了巨大成功，广泛应用于图像识别、物体检测、图像生成等任务。以下是 CNN 的主要理论概念： 在数学中，卷…...

编程日记 2023/11/22 0:42:56

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/18 11:02:17

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2026/2/18 19:34:45

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2026/1/27 19:28:11

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...

编程新知 2026/2/18 0:51:27