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

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

news 2026/5/9 8:18:59
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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

GNOME桌面集成ChatGPT：AI助手无缝接入Linux工作流

1. 项目概述&#xff1a;在GNOME桌面集成你的AI助手 如果你和我一样&#xff0c;日常主力使用Linux&#xff0c;特别是GNOME桌面环境&#xff0c;同时又重度依赖ChatGPT这类AI工具来辅助编程、写作或者快速查询信息&#xff0c;那么来回切换浏览器标签页或者应用窗口的操作&am…...

编程新知 2026/5/9 5:54:34

语音技能开发框架解析：从事件驱动到插件化实现

1. 项目概述与核心价值最近在折腾一个挺有意思的开源项目&#xff0c;叫hermesnest/sister-skill。乍一看这个名字&#xff0c;可能会觉得有点抽象&#xff0c;甚至带点神秘色彩。但如果你对智能语音助手、家庭自动化或者个人AI助理这类话题感兴趣&#xff0c;那这个项目绝对值…...

编程新知 2026/5/9 3:28:02

[Deep Agents:LangChain的Agent Harness-03]FilesystemMiddleware：赋能Agent读写文件及管理长上下文

通过“构建抽象的文件系统”我们知道&#xff0c;Deep Agents的文件系统是建立在一个利用BackendProtocol协议抽象的文件系统之上的&#xff0c;使得Agent能够以统一的方式进行文件操作&#xff0c;无论底层存储是本地磁盘、云端S3、数据库还是内存。这种设计不仅提供了极大的灵…...

编程新知 2026/5/9 3:12:58

WebMCP：连接Web应用与AI模型的统一协议服务器实践

1. 项目概述&#xff1a;一个连接Web应用与AI模型的“万能适配器”最近在折腾一些AI应用开发时&#xff0c;我遇到了一个挺典型的痛点&#xff1a;手头有各种功能强大的大语言模型&#xff08;LLM&#xff09;&#xff0c;比如OpenAI的GPT、Anthropic的Claude&#xff0c;或者开…...

编程新知 2026/5/9 3:02:25

Qt 容器实战：用 QMap＜QString, QList＜T＞＞ 实现一对多关系映射

在 Qt 开发中，经常遇到一个分类对应多个条目的场景，比如： 设置面板中"网络"分类下有多个配置项 商品系统中"电子产品"分类下有多个商品 权限系统中"管理员"角色有多个权限点 这类一对多关系，用 QMap<QString, QList<T>> 是极为优…...

编程新知 2026/5/9 1:19:09

从科幻到芯片：用FPGA与MCU构建《红矮星号》数字逻辑系统

1. 项目概述&#xff1a;一次怀旧之旅与可编程逻辑的意外共鸣最近&#xff0c;我经历了一次纯粹由个人兴趣驱动的“考古”发现&#xff0c;它让我这个在电子设计自动化&#xff08;EDA&#xff09;和可编程逻辑领域浸淫了二十多年的老工程师&#xff0c;感到了一种久违的、孩子…...

编程新知 2026/5/9 0:21:36

V-REX框架：多步视觉推理评估的创新解决方案

1. 项目概述V-REX是一个专注于多步探索式视觉推理的评估框架&#xff0c;它通过创新的Chain-of-Questions方法&#xff0c;为视觉推理任务提供了系统化的评估解决方案。这个框架的核心价值在于解决了传统视觉问答系统在复杂推理场景下的评估难题。在实际应用中&#xff0c;我们…...

编程新知 2026/5/8 23:51:25

2026年AI Agent框架深度对比评测：6大框架横评选型指南

前言 DevOps领域一直在追求"自动化一切"&#xff0c;而AI的加入让这个目标更近了一步。从智能构建检测到自动化部署决策&#xff0c;AI正在重塑CI/CD流水线的每个环节。本文将分享如何在实际项目中用AI增强你的DevOps工作流。一、AI能为DevOps做什么&#xff1f; 传统…...

编程新知 2026/5/8 23:35:16

CR52168BSJ-36W橱柜灯电源方案,输入170-264V输出12V,2.6A，低待机功耗，效率高。

CR52168BSJ-36W橱柜灯电源方案,输入170-264V输出12V,2.6A&#xff0c;低待机功耗&#xff0c;效率高。 在现在家庭装修中&#xff0c;橱柜灯、衣柜灯和镜子灯等都是家具照明的热门产品&#xff0c;但市场上种类选择多样化&#xff0c;竞争激烈。因而内置恒压恒流&#xff0c;高…...

编程新知 2026/5/8 23:08:53

智能体管理系统架构设计：从容器化到消息队列的工程实践

1. 项目概述&#xff1a;从开源项目标题看智能体管理的核心价值 最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“stainlu/openclaw-managed-agents”。光看这个标题&#xff0c;就能嗅到一股浓浓的“智能体管理”和“自动化”的味道。作为一个在自动化运维和智能体开发领…...

编程新知 2026/5/8 22:40:30