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

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

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;在发生某些特定情况时互相通信或协作。事件驱…...

node_exporter

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

近期在看

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

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

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

【Linux】网络编程_3

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

Kafka设计与原理详解

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

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

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

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

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

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…...

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

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

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

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

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

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

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

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

原生javascript中的ajax通信技术

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

SpringBoot Vue用自签名证书SSL配置https,http转发到https(整理文章)

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

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

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

C++ 动态规划

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

回溯问题总结

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

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

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

.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…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

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

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

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

《信号与系统》第 6 章 信号与系统的时域和频域特性

目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...

EEG-fNIRS联合成像在跨频率耦合研究中的创新应用

摘要 神经影像技术对医学科学产生了深远的影响&#xff0c;推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下&#xff0c;基于神经血管耦合现象的多模态神经影像方法&#xff0c;通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里&#xff0c;本研…...