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

JavaScript青少年简明教程：事件及处理

news 2026/2/8 11:27:23

JavaScript青少年简明教程：事件及处理

在编程语言中，事件（Event）是一种使程序能够响应特定操作或条件发生的机制。它允许程序中的不同部分（比如对象、类或模块）在发生某些特定情况时互相通信或协作。事件驱动编程（Event-driven programming）是一种基于事件的编程范式，它依赖于事件和回调函数（或监听器）来处理或响应这些事件。

事件的基本组成部分

  1. 事件源（Event Source）：产生事件的实体或对象。例如，在网页上，一个按钮点击事件的事件源就是该按钮。
  2. 事件（Event）：具体发生的情况或动作，通常包含有关该动作的一些信息（如发生的时间、位置等）。在事件处理中，事件本身通常被封装成一个对象，这个对象包含了事件的详细信息。
  3. 事件处理器（Event Handler）：是当事件发生时被调用的函数或方法。它定义了当事件发生时应该执行的动作。

网页上发生的事情或用户行为，如点击按钮、输入文本、移动鼠标等都是事件。JavaScript能够监听这些事件并根据事件执行相应的代码，从而使网页能够对用户操作作出反应。

常见的JavaScript事件类型

  1. 鼠标事件：如click（点击）、dblclick（双击）、mouseover（鼠标悬停）、mouseout（鼠标移出）、mousedown（鼠标按下）、mouseup（鼠标松开）等。
  2. 键盘事件：如keydown（键盘按键按下）、keyup（键盘按键释放）、keypress（字符键被按下）。
  3. 表单事件：如submit（表单提交）、change（表单字段变化）、focus（获得焦点）、blur（失去焦点）。
  4. 窗口事件：如load（页面加载完成）、resize（窗口大小改变）、scroll（滚动窗口）。
  5. 触摸事件：针对移动设备，如touchstart、touchmove、touchend、touchcancel。

事件处理方式

JavaScript处理事件的方式主要有两种：通过HTML属性添加事件处理程序和使用JavaScript添加事件监听器。

1) HTML属性： 在HTML元素中直接使用事件属性添加事件处理代码，如：

<button οnclick="alert('Hello World')">点击我</button>

这种方法简单直接，它使HTML和JavaScript的代码耦合度增高，不易于维护。

2) JavaScript事件监听器（Event Listener）： 使用addEventListener方法可以在JavaScript代码中添加事件处理程序，这样可以将行为（JavaScript）与结构（HTML）分离，提高代码的可维护性。示例：

document.getElementById("myButton").addEventListener("click", function() { alert("Hello World"); });

这种方法更加灵活，允许为一个事件添加多个监听器，且可以更容易地控制监听器的移除。

事件传播

事件在DOM中的传播有两个阶段：捕获阶段和冒泡阶段。

  • 捕获阶段：事件从文档根节点沿DOM树向下传递到事件目标的过程。
  • 冒泡阶段：事件从事件目标沿DOM树向上回传到文档根节点的过程。

默认情况下，事件处理程序只在冒泡阶段执行，但可以通过addEventListener的第三个参数设置为true，使处理程序在捕获阶段执行。

事件监听器

事件监听器（Event Listener）是 JavaScript 中处理用户交互和异步操作的重要机制。它们允许开发者响应用户的操作（如点击、输入、鼠标移动等）以及其他异步事件（如网络请求、定时器等）。事件监听器是实现动态和互动 Web 应用程序的关键工具。

addEventListener 方法是 JavaScript 中最常用的事件绑定方式。它允许你将事件监听器附加到 DOM 元素上，并指定事件类型和回调函数。语法：

元素对象.addEventListener('事件类型'，要执行的函数)

事件监听器三要素：

事件目标(Event Target)：哪个DOM元素对象触发了事件。

事件类型(Event Type)：触发事件的方式，也称为触发事件的事件名称，比如鼠标单击click、鼠标经过mouseover等。

事件处理函数(Event Handler)：实现要做什么事情的函数。这个函数包含了事件发生时要执行的操作。

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

例如，响应用户的点击按钮操作：

<button id="myButton">Click Me!</button>
<script>// 首先，定义事件处理函数function handleClick() {alert('按钮被点击');}// 为按钮添加事件监听器
document.getElementById("myButton").addEventListener("click", function);
</script>

移除事件监听器

当不再需要监听某个事件时，应当移除对应的事件监听器，以避免可能的内存泄漏和性能问题。

可以使用removeEventListener方法将其移除。

这个方法需要与addEventListener使用相同的参数，包括事件类型、事件处理函数和用于指定事件是否在捕获阶段触发的选项（可选）。

// 当需要移除事件监听器时

document.getElementById("myButton").removeEventListener('click', function);

注意事项

1.确保函数相同：removeEventListener需要引用相同的函数。如果你在addEventListener时使用了匿名函数，那么你需要保持这个函数的引用，以便后终使用removeEventListener。如果直接传递一个新的函数或匿名函数，将无法正确移除监听器。

2.捕获与冒泡：如果在添加事件监听器时指定了事件处理程序在捕获阶段执行（即第三个参数为true），则在移除时也需要指定相同的参数。

3.重复移除：多次调用removeEventListener对同一个监听器没有副作用，但只有第一次调用会实际移除监听器。

例、这个例子展示了几种不同的事件处理方式：

使用HTML属性直接绑定事件（如onclick, onmouseover）

使用JavaScript的addEventListener方法添加事件监听器

源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML事件处理示例</title><style>body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }.example { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; }#hoverDiv { background-color: lightblue; padding: 10px; }</style>
</head>
<body><h2>HTML事件处理示例</h2><div class="example"><h3>1. 点击事件 (onclick)</h3><button onclick="showMessage()">点击我</button></div><div class="example"><h3>2. 鼠标悬停事件 (onmouseover/onmouseout)，请留意颜色变化</h3><div id="hoverDiv" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='lightblue'">将鼠标悬停在此处</div></div><div class="example"><h3>3. 键盘事件 (onkeyup)</h3><input type="text" id="keyInput" onkeyup="document.getElementById('keyOutput').textContent = this.value"><p>你输入的是: <span id="keyOutput"></span></p></div><div class="example"><h3>4. 表单提交事件 (onsubmit)</h3><form onsubmit="event.preventDefault(); alert('表单已提交');"><input type="text" placeholder="输入些什么..."><button type="submit">提交</button></form></div><script>function showMessage() {  alert('按钮被点击了——使用onclick属性响应!');  }         // 使用 addEventListener 添加点击事件监听器document.querySelector('button').addEventListener('click', function() {alert('按钮被点击了——使用 addEventListener方式响应!');});</script>
</body>
</html>

这个示例包含了几个常见的事件处理：

1)点击事件 (onclick):

使用内联的onclick属性和addEventListener方法两种方式演示。

2)鼠标悬停事件 (onmouseover/onmouseout):

当鼠标悬停在div上时改变背景颜色。

3)键盘事件 (onkeyup):

在输入框中输入文字时,实时显示输入的内容。

4)表单提交事件 (onsubmit):

阻止表单的默认提交行为,而是显示一个提交成功的提示。

进一步学习，可参考：

JS的事件介绍 https://blog.csdn.net/cnds123/article/details/127103830

JS捕获页面按键事件 https://blog.csdn.net/cnds123/article/details/122136978

JavaScript事件示例 https://blog.csdn.net/cnds123/article/details/120530675

相关文章：

JavaScript青少年简明教程：事件及处理

JavaScript青少年简明教程&#xff1a;事件及处理 在编程语言中&#xff0c;事件&#xff08;Event&#xff09;是一种使程序能够响应特定操作或条件发生的机制。它允许程序中的不同部分&#xff08;比如对象、类或模块&#xff09;在发生某些特定情况时互相通信或协作。事件驱…...

编程日记 2024/8/3 8:57:48

node_exporter

目录 指标详解常用指标 指标详解 指标描述node_arp_entriesARP&#xff08;Address Resolution Protocol&#xff09;表中的条目数量&#xff0c;用于将IP地址映射到MAC地址。node_boot_time_seconds系统启动时间的Unix时间戳&#xff0c;表示从1970年1月1日以来的秒数。node…...

编程日记 2024/8/3 8:56:48

近期在看

1. C Primer 2. 深入理解 FFmpeg 3. 鸿蒙 sdk 开发...

编程日记 2024/8/3 8:54:45

C++篇：C++入门基础(1)

C前言&#xff1a; C 的发展历史可以追溯到1979年&#xff0c;当时C语言以其效率和灵活性成为广泛使用的系统编程语言&#xff0c;但它也有一些限制&#xff0c;例如缺乏直接支持面向对象编程&#xff08;OOP&#xff09;的特性。 之后Bjarne Stroustrup(也就是C之父)是C的创始…...

编程日记 2024/8/3 8:52:43

【Linux】网络编程_3

文章目录 十、网络基础5. socket编程socket 常见APIsockaddr结构简单的UDP网络程序 未完待续 十、网络基础 5. socket编程 socket 常见API // 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器) int socket(int domain, int type, int protocol);// 绑定端口号 (TCP/UDP, 服…...

编程日记 2024/8/3 8:51:42

Kafka设计与原理详解

RocketMQ 是一款开源的分布式消息系统&#xff0c;基于高可用分布式集群技术&#xff0c;提供低延时的、高可靠的消息发布与订阅服务。同时&#xff0c;广泛应用于多个领域&#xff0c;包括异步通信解耦、企业解决方案、金融支付、电信、电子商务、快递物流、广告营销、社交、即…...

编程日记 2024/8/3 8:50:40

IPV6公网暴露下的OPENWRT防火墙安全设置（只允许访问局域网中指定服务器指定端口其余拒绝）

首先是防火墙的常规配置和区域配置 标的有点乱但是选项含义都做了解释&#xff0c;看不懂可以直接按图抄作业。 其次是对需要访问的端口做访问放通 情况1 DDNS位于openwrt网关上&#xff0c;外网访问openwrt&#xff0c;通过端口转发访问内部服务器。此情况需要设置端口转发。 …...

编程日记 2024/8/3 8:49:39

单调栈② | Java | LeetCode 接雨水 最大的矩形

42. 接雨水 暴力法 for循环遍历每一个柱子&#xff0c;内层for循环找到左边和右边比它高的柱子 时间复杂度 n^2 优化&#xff1a;添加一个预处理 定义一个数组&#xff0c;存放该柱子右边比他高的柱子是哪一个 再用一个数组&#xff0c;存放该柱子左边比他高的柱子是哪一个 …...

编程日记 2024/8/3 8:47:37

2024年全国青少年信息素养大赛总决赛日赛程表

2024全国青少年信息素养大赛赛程表分赛场&#xff08;浙江传媒学院桐乡校区、桐乡技师学院&#xff09;日期地点时间赛项16日传媒学院8:00-9:00检录 9:00-10:30开赛图形化编程挑战赛&#xff08;小学1-3年级&#xff09;A组12:00-13:00检录 13:00-14:30开赛图形化编程挑战赛&am…...

编程日记 2024/8/3 8:46:36

PHP：连接钉钉接口-钉钉回调事件，本地测试数据

前置数据参考 数据说明&#xff1a;参见官方文档回调事件消息体加解密 - 钉钉开放平台 (dingtalk.com) URL后面带的参数&#xff1a; signature5a65ceeef9aab2d149439f82dc191dd6c5cbe2c0&timestamp1445827045067&noncenEXhMP4r Post参数&#xff1a; { &quo…...

编程日记 2024/8/3 8:43:34

【C++标准模版库】vector的介绍及使用

vector 一.vector的介绍二.vector的使用1.vector 构造函数2.vector 空间增长3.vector 增删查改4.vector 迭代器的使用1.正向迭代器2.反向迭代器 5.victor 迭代器失效问题&#xff08;重点&#xff09; 三.vector不支持 流提取与流插入四.vector存储自定义类型1.存储string2.存储…...

编程日记 2024/8/3 8:41:31

数说故事|引爆社媒的森贝儿IP，品牌如何实现流量变现？

以可爱、雅痞、贱萌......的外表加魔性舞姿出圈的可爱小狗——森贝儿贵宾犬Milo&#xff0c;用“可爱微怒”的表情演绎着当代打工人的“疯态”&#xff0c;并迅速晋升成不少打工人高频使用的表情包。 最近几年&#xff0c;“萌系”爆款IP频出&#xff0c;用小动物的形象、可爱…...

编程日记 2024/8/3 8:40:30

使用openpyxl库对Excel条件格式的深度探索

哈喽，大家好，我是木头左！ openpyxl中的条件格式 在openpyxl中，可以使用ConditionalFormatting类来创建和管理条件格式。这个类有两个主要的方法：add_conditional_formatting()和remove_conditional_formatting()，分别用于添加和删除条件格式。 add_conditional_formatt…...

编程日记 2024/8/3 8:39:29

原生javascript中的ajax通信技术

AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种在无需重新加载整个网页的情况下&#xff0c;能够更新部分网页的技术。也就是实现前后端交互的功能。以下是使用AJAX的基本步骤和代码演示&#xff1a; 1.创建一个XMLHttpRequest对象&#xff1a; var xhr…...

编程日记 2024/8/3 8:38:28

SpringBoot Vue用自签名证书SSL配置https，http转发到https（整理文章）

要配置https地址访问&#xff0c;需要向服务器商申请和使用SSL证书。由于是测试阶段&#xff0c;我们自己创建SSL证书&#xff0c;叫作自签名证书。 1.创建自签名证书 Vue前端生成自签名证书我们用openssl 参考文章一 参考文章二SpringBoot后端生成自签名证书用JDK自带的keyt…...

编程日记 2024/8/3 8:37:27

嵌入式人工智能（41-基于树莓派4B的串口蓝牙模块AT09-cc2541）

1、串口蓝牙模块AT-09 AT-09是一种串口蓝牙模块&#xff0c;可实现串口与蓝牙之间的数据传输。AT-09模块基于蓝牙4.0技术&#xff0c;具有低功耗、高传输速率和广泛的应用范围。 AT-09模块支持AT指令&#xff0c;通过串口与外部设备进行通信。用户可以使用AT指令对模块进行配…...

编程日记 2024/8/3 8:36:27

C++ 动态规划

子序列子串相关 单个指一个数组或字符串&#xff0c;两个指两个数组或字符串。 最长上升子序列-单个 dp[i]&#xff1a;以下标i为结尾的递增的最长子序列长度。 位置i的最长升序子序列等于j从0到i-1各个位置的最长升序子序列 1 的最大值。 class Solution { public:int l…...

编程日记 2024/8/3 8:35:25

回溯问题总结

一、子集问题 模板问题 给定一个序列[1,n],求这个序列的所有子集 输入描述&#xff1a; 一个正整数n(1 < n < 12) 输出描述&#xff1a; 每个子集一行&#xff0c;输出所有子集。 输出顺序为&#xff1a; &#xff08;1&#xff09;元素个数少的子集优先输出&#xff1b;…...

编程日记 2024/8/3 8:34:24

GraphRAG如何使用ollama提供的llm model 和Embedding model服务构建本地知识库

使用GraphRAG踩坑无数 在GraphRAG的使用过程中将需要踩的坑都踩了一遍&#xff08;不得不吐槽下&#xff0c;官方代码有很多遗留问题&#xff0c;他们自己也承认工作重心在算法的优化而不是各种模型和框架的兼容性适配性上&#xff09;&#xff0c;经过了大量的查阅各种资料以…...

编程日记 2024/8/3 8:31:21

.net # 检查 带有pdf xss

1.解决pdf含javasprct脚本动作&#xff0c;这里是验证pdf内部事件。相关pdf文件下载&#xff1a; 测试pdf文件 相关包 iTextSharp 5.5.13.4 iTextSharp using iTextSharp.text.pdf; using iTextSharp.text.pdf.parser;private Boolean IsPdfSafe(Stream stream){// PdfReader…...

编程日记 2024/8/3 8:27:18

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/7 4:19:43

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/6 10:39:49

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2026/1/25 16:39:17

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2026/2/8 6:37:36

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10