当前位置: 首页 > 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…...

【React】探讨className的正确使用方式

文章目录 一、className的正确用法二、常见错误解析三、实例解析四、错误分析与解决五、注意事项六、总结 在React开发中&#xff0c;正确使用className属性对组件进行样式设置至关重要。然而&#xff0c;由于JavaScript和JSX的特殊性&#xff0c;开发者常常会犯一些小错误&…...

打靶记录5——靶机hard_socnet2

靶机&#xff1a; https://download.vulnhub.com/boredhackerblog/hard_socnet2.ova目标&#xff1a; 取得root权限 涉及攻击方法 主机发现端口扫描SQL注入文件上传蚁剑上线XMLRPC命令执行逆向工程动态调试漏洞利用代码编写 方法 CVE-2021-3493缓冲器溢出漏洞 学习目标 …...

独立站+TikTok达人:自主营销与创意内容的完美结合

在全球电商市场迅猛发展的今天&#xff0c;独立站和TikTok达人的结合正在创造一种全新的电商营销模式。独立站作为电商平台&#xff0c;其自主性和灵活性为商家提供了广阔的发展空间&#xff1b;而TikTok达人凭借其独特的内容创作能力和庞大的粉丝基础&#xff0c;成为推动销售…...

【启明智显分享】适用于多功能养生壶、茶吧机的2.8寸触摸彩屏解决方案

健康生活理念不断深入人心&#xff0c;多功能养生壶、茶吧机等智能产品成为现代家庭的热门小家电。为推动智能家居个性化、多样化发展&#xff0c;启明智显推出了基于SC05 Plus 2.8寸触摸彩屏的多功能养生壶、茶吧机的解决方案&#xff0c;旨在提升养生壶与茶吧机的用户体验与操…...

WAF绕过技术(PKAV团队)

目录 主流WAF的绕过技术 Web容器的特性 1. IIS+ASP的神奇% 2. IIS的Unicode编码字符 3. HPP(HTTP Parameter Pollution): HTTP参数污染 4. 畸形HTTP请求 Web应用层的问题 1. 多重编码问题 2. 多数据来源的问题 WAF自身的问题 1. 白名单机制 2. 数据获取方式存在缺陷…...

『 Linux 』POSIX 信号量与基于环形队列的生产者消费者模型

文章目录 信号量概念POSIX 信号量基于环形队列的生产者消费者模型基于环形队列的生产者消费者模型编码实现基于环形队列的生产者消费者模型发送任务测试 信号量概念 信号量是一种用于多线程或多进程间同步的机制; 其定义是一个整形变量,本质上信号量可以看成是一个计数器,用来描…...

python中的字符串方法

python中的字符串 举个例子先 name = 貂蝉开大 #声明了一个字符串 print(name) # 打印了一个字符串 print(name[0:1] #输出貂蝉 print(name[2:3] #输出开大 扩展方法 find() # 查找字符串中某个字符的索引 index_ = name.find("貂") print(index_) # 输出 …...

python实现consul的服务注册与注销

我在使用consul的时候主要用于prometheus的consul服务发现&#xff0c;把数据库、虚拟机信息发布到consul&#xff0c;prometheus通过consul拿到数据库、虚拟机信息去采集指标信息。 此篇文章前提是已经安装好consul服务以后&#xff0c;安装consul请参考二进制方式部署consul…...

校园选课助手【2】-重要的登录模块

用户登录模块技术要点&#xff1a; 密码通过MD5加密传输分布式session存储用户登录信息自定义注解进行字段校验自定义拦截器完成登录验证 下面依次给出代码和详细解释&#xff1a; 1.使用 MD5 二次加密用户登录信息&#xff0c;前端先通过密码加上盐进行MD5加密交给服务器&a…...

4章2节:从排序到分组和筛选,通过 R 的 dplyr 扩展包来操作

dplyr是R语言中一个强大且高效的数据处理包,专门设计用于处理数据框(data frames)。它的语法简洁明了,操作高效,尤其适用于大数据集。dplyr提供了一系列函数,使得数据的筛选、变换、聚合和排序等操作变得简单直观。本文将详细介绍dplyr扩展包如何进行数据的排序到分组和筛…...