在网页开发中，交互性是提升用户体验的关键。JavaScript作为网页交互的核心语言，通过事件处理机制让静态页面"动"了起来。本文将通过7个经典案例，从简单到复杂，逐步讲解JavaScript事件处理的实现方法和应用场景。

案例1：点击事件控制元素大小

这个案例展示了最基础的点击事件应用，通过点击不同的div来控制目标元素的大小变化。

核心代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点击控制元素大小</title>
<style>
#gaiBianWenZi{width: 400px; height: 20px;border: solid red 1px;text-align: center;line-height: 20px;cursor: pointer; /* 鼠标悬停显示手型，提示可点击 */
}#seKuai{width: 100px; height: 100px; background-color: red;margin: 20px auto; /* 居中显示 */
}#huanYuanWenZi{width: 400px; height: 20px;border: solid green 1px;text-align: center;line-height: 20px;cursor: pointer;
}
</style><script>
// 改变元素大小的函数
function gaiBian(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "200px";seKuai.style.height = "200px";
}// 还原元素大小的函数
function huanYuan(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "100px";seKuai.style.height = "100px";
}
</script>
</head>
<body>
<div id="gaiBianWenZi" onclick="gaiBian()"> 点击我改变div色块大小
</div>
<div id="huanYuanWenZi" onclick="huanYuan()">还原div色块大小
</div>
<div id="seKuai"></div>
</body>
</html>

关键知识点

  1. 事件绑定方式：使用onclick属性在HTML标签中直接绑定点击事件
  2. DOM元素获取：通过document.getElementById()方法获取页面元素
  3. 样式修改：通过修改元素的style属性来改变CSS样式
  4. 用户体验提示：使用cursor: pointer提示元素可点击

案例1扩展：同时控制大小和颜色

在基础版的基础上，这个扩展案例增加了颜色控制，展示了如何同时修改多个样式属性。

核心改进点

function ONCLICK(){var div1 = document.getElementById("div1");// 同时修改大小和颜色div1.style.width = "200px";div1.style.height = "200px";div1.style.backgroundColor = "blue"; // 改变背景色
}function huanYuan(){var div1 = document.getElementById("div1");// 还原为初始状态div1.style.width = "100px";div1.style.height = "100px";div1.style.backgroundColor = "red";
}

扩展知识点

  1. 多属性修改：可以同时修改元素的多个样式属性
  2. 命名规范：CSS中的background-color在JavaScript中需写为backgroundColor（驼峰命名法）
  3. 元素选择：除了div，其他元素（如p标签）也可以绑定事件

案例2：鼠标悬停事件

这个案例展示了如何使用鼠标悬停(onmouseover)和鼠标离开(onmouseout)事件实现交互效果。

核心代码

<div id="seKuai" onmouseover="gaiBian()" onmouseout="huanYuan()"></div><script>
function gaiBian(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "200px";seKuai.style.height = "200px";
}function huanYuan(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "100px";seKuai.style.height = "100px";
}
</script>

关键知识点

  1. 鼠标事件类型：
    • onmouseover：鼠标移动到元素上时触发
    • onmouseout：鼠标从元素上移开时触发
  2. 即时反馈：这种交互方式能给用户提供即时的视觉反馈，增强交互体验
  3. 应用场景：常用于导航菜单、按钮等元素的状态提示

案例3：表单焦点事件

表单交互是网页中最常见的交互场景之一，这个案例展示了如何使用焦点事件处理表单交互。

核心代码

<br>用户名称:
<input type="text" id="txt1" onfocus="unameText()" onblur="tiShi1()" />
<span id="span1"></span><br>用户密码:
<input type="text" id="txt2" onfocus="upwdText()" onblur="tiShi2()" />
<span id="span2"></span><script>
// 获取焦点时触发：显示输入内容
function unameText(){var span1 = document.getElementById("span1");span1.innerHTML = document.getElementById("txt1").value;
}// 失去焦点时触发：显示提示信息
function tiShi1(){var span1 = document.getElementById("span1");span1.innerHTML = "失去焦点了哦";span1.style.color = "red";
}// 密码框的类似处理...
function upwdText(){/* 略 */}
function tiShi2(){/* 略 */}
</script>

关键知识点

  1. 表单事件类型：
    • onfocus：元素获取焦点时触发（如点击输入框）
    • onblur：元素失去焦点时触发（如点击输入框外区域）
  2. 内容操作：使用innerHTML属性修改元素内容
  3. 表单反馈：实时向用户提供操作反馈，提升表单填写体验

案例4：文本选择事件

这个案例展示了如何通过onselect事件响应文本选中操作。

核心代码

<input type="text" id="txt1" onselect="xuanZhong(this)" /><script>
// 选中文本时触发
function xuanZhong(chuanZhi){alert(chuanZhi.value); // 弹出选中的内容
}
</script>

关键知识点

  1. this关键字：代表当前触发事件的元素，简化代码编写
  2. 事件传参：通过this将当前元素作为参数传递给处理函数
  3. 用户输入捕获：onselect事件可用于捕获用户选中的文本内容

案例5：下拉框改变事件

下拉选择框(select)是常用的表单元素，onchange事件用于响应选项变化。

核心代码

<select onchange="xuanZhong(this)"><option value="诗书画唱">诗书画唱</option><option value="三连">三连</option><option value="点赞">点赞</option>
</select><script>
function xuanZhong(chuanZhi){alert(chuanZhi.value); // 弹出选中的选项值
}
</script>

关键知识点

  1. onchange事件：当元素的值发生改变时触发，常用于select、input等元素
  2. 选项值获取：通过value属性获取选中项的值
  3. 表单联动：这是实现表单元素联动效果的基础（如省市区三级联动）

案例6：实时输入统计

这个案例展示了如何实时监测用户输入，并进行字数统计，这在评论、留言等场景中非常实用。

核心代码

<input type="text" onkeyup="tiShi(this)" />
<span id="spanId">你输入了0个字</span><script>
function tiShi(chuanZhi){var ziShu = chuanZhi.value.length; // 获取输入长度var spanIdVar = document.getElementById("spanId");spanIdVar.innerHTML = "你输入了" + ziShu + "个字";spanIdVar.style.color = "red";
}
</script>

关键知识点

  1. 键盘事件：onkeyup在键盘按键松开时触发，适合实时监测输入
  2. 输入长度计算：通过value.length获取输入内容的长度
  3. 实时反馈：提供即时的输入反馈，增强用户体验
  4. 扩展应用：可用于实现输入字数限制、实时搜索提示等功能

案例7：简易计算器

这个案例综合运用了前面介绍的多种事件处理方法，实现了一个简单的计算器功能。

核心代码

<input type="text" id="txtId1" />
<select id="selectId1"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>
</select>
<input type="text" id="txtId2" />=
<input type="text" id="txtId3" />
<input type="button" value="计算结果" id="buttonId" /><script>
window.onload = function(){var buttonIdVar = document.getElementById("buttonId");buttonIdVar.onclick = function(){var txt1 = document.getElementById("txtId1");var txt2 = document.getElementById("txtId2");// 验证输入是否为数字if(!isNaN(txt1.value) && !isNaN(txt2.value)){var result = document.getElementById("txtId3");var select = document.getElementById("selectId1");var op = select.options[select.selectedIndex].value;// 根据选择的运算符进行计算switch(op){case "+":result.value = Number(txt1.value) + Number(txt2.value);break;case "-":result.value = Number(txt1.value) - Number(txt2.value);break;case "*":result.value = Number(txt1.value) * Number(txt2.value);break;case "/":if(Number(txt2.value) == 0){alert("除数不能为0，请重新输入");txt1.value = "";txt2.value = "";result.value = "";} else {result.value = Number(txt1.value) / Number(txt2.value);}break;}} else {alert("请输入数字");txt1.value = "";txt2.value = "";}}
}
</script>

关键知识点

  1. 事件绑定方式：除了HTML属性绑定，还可以通过JavaScript代码动态绑定事件（buttonIdVar.onclick = function(){...}）
  2. 页面加载事件：window.onload确保在页面完全加载后再执行JavaScript代码
  3. 数据验证：使用isNaN()函数验证输入是否为有效数字
  4. 类型转换：使用Number()将字符串转换为数字进行计算
  5. 条件判断与分支：综合运用if-else和switch进行逻辑处理
  6. 错误处理：对除数为0等异常情况进行处理

总结与扩展

通过这7个案例，我们学习了JavaScript中最常用的事件处理方法，包括：

  • 点击事件(onclick)
  • 鼠标事件(onmouseover, onmouseout)
  • 焦点事件(onfocus, onblur)
  • 选择事件(onselect)
  • 改变事件(onchange)
  • 键盘事件(onkeyup)

这些基础事件是构建复杂交互的基石。在实际开发中，我们还可以：

  1. 使用更现代的事件绑定方式（addEventListener）
  2. 实现事件委托，优化大量相似元素的事件处理
  3. 结合CSS过渡和动画，创建更流畅的交互效果
  4. 使用框架（如Vue、React）的事件处理机制，提高开发效率

掌握事件处理是成为前端开发工程师的必备技能，希望这些案例能帮助你打下坚实的基础，在实际项目中灵活运用，创造出优秀的用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/95076.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/95076.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/95076.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

内存模型(Memory Model)是什么？

内存模型(Memory Model)是什么？

内存模型(Memory Model)是什么？ 内存模型是一个非常深刻且核心的计算机科学概念。 核心摘要 内存模型是一个契约或协议，它精确定义了： 一个线程对共享内存的写操作，如何以及何时对其他线程可见。 内存操作（读/写）可以被重新排序的程度。 它连接了硬件（CPU如何执行指令…
阅读更多...
在 MyBatis 中oracle基本数值类型的 JDBC 类型映射

在 MyBatis 中oracle基本数值类型的 JDBC 类型映射

基本数值类型的 JDBC 类型Java 类型JDBC 类型 (jdbcType)说明int / IntegerINTEGER标准整数类型long / LongBIGINT大整数类型short / ShortSMALLINT小整数类型float / FloatFLOAT单精度浮点数double / DoubleDOUBLE双精度浮点数java.math.BigDecimalDECIMAL高精度小数&#xff…
阅读更多...
Spring注解演进与自动装配原理深度解析：从历史发展到自定义Starter实践

Spring注解演进与自动装配原理深度解析：从历史发展到自定义Starter实践

目录 Spring注解发展史 Spring 1.X Spring 2.X Spring 2.5之前 Required Repository Aspect Spring2.5 之后 Spring 3.x ComponentScan Import 静态导入 ImportSelector ImportBeanDefinitionRegistrar EnableXXX Spring 4.x Spring 5.x 什么是SPI 自动装配…
阅读更多...
第三届机械工程与先进制造智能化技术研讨会（MEAMIT2025）

第三届机械工程与先进制造智能化技术研讨会（MEAMIT2025）

【重要信息】 大会官网&#xff1a;https://www.yanfajia.com/action/p/BYE27DYDhttps://www.yanfajia.com/action/p/BYE27DYD 会议地点&#xff1a;哈尔滨理工大学 论文检索&#xff1a;EI Compendex、Scopus 还有部份版面&#xff0c;欲投稿从速&#xff0c;即将提交出版…
阅读更多...
笔记本电脑频繁出现 vcomp140.dll丢失怎么办？结合移动设备特性，提供适配性强的修复方案

笔记本电脑频繁出现 vcomp140.dll丢失怎么办？结合移动设备特性，提供适配性强的修复方案

对于需要用电脑处理工作的人来说&#xff0c;“vcomp140.dll 丢失” 导致程序频繁闪退&#xff0c;无疑会严重影响工作效率。尝试重启电脑、重新安装软件后&#xff0c;问题依然存在&#xff0c;这时候该怎么办&#xff1f;别着急&#xff0c;vcomp140.dll 丢失看似棘手&#x…
阅读更多...
微动开关-电竞鼠标核心！5000万次寿命微动开关评测

微动开关-电竞鼠标核心！5000万次寿命微动开关评测

一、主流电竞微动开关技术对比‌光磁微动技术‌采用非接触式光学触发原理理论寿命突破5000万次触发响应速度0.2ms‌‌传统机械微动‌欧姆龙D2FC-F-7N系列5000万次标称寿命机械结构简单可靠‌‌创新结构微动‌双飞燕漆蓝荧光微动特殊涂层提升耐久性手感反馈独特‌二、5000万次寿…
阅读更多...
Go语言与Docker 开发的核心应用领域

Go语言与Docker 开发的核心应用领域

1. 容器化应用构建与部署‌‌轻量化镜像构建Go 语言编译生成静态二进制文件&#xff0c;结合多阶段构建的 Dockerfile&#xff0c;可大幅缩小镜像体积&#xff08;例如使用 scratch 或 alpine 基础镜像&#xff09;&#xff0c;提升部署效率‌。示例 Dockerfile 片段&#xff1…
阅读更多...
【ESP32-IDF】网络连接开发2：Wi‑Fi 智能配网（SmartConfig）

【ESP32-IDF】网络连接开发2：Wi‑Fi 智能配网（SmartConfig）

系列文章目录 持续更新… 文章目录系列文章目录前言一、Wi‑Fi 智能配网概述1.SmartConfig 简介2.SmartConfig 工作原理3.SmartConfig 协议类型二、Wi‑Fi 智能配网类型定义及相关API三、Wi‑Fi 智能配网示例程序总结前言 在物联网设备开发过程中&#xff0c;如果将 Wi-Fi 的…
阅读更多...
CVPR深度学习研究指南：特征提取模块仍是论文创新难点

CVPR深度学习研究指南：特征提取模块仍是论文创新难点

关注gongzhonghao【CVPR顶会精选】在深度学习赛道里&#xff0c;别只盯着堆模型卷参数了。最近不少高分工作都在打“可解释”这张牌&#xff0c;把原本难以理解的黑箱模型用轻量方法剖开&#xff0c;既能增强学术价值&#xff0c;还能拓展落地场景。更妙的是&#xff0c;这类研…
阅读更多...
redis----list详解

redis----list详解

列表&#xff08;List&#xff09;相当于数组或者顺序表一、通用命令LPUSH key value1 [value2 ...]在列表 key 的左侧&#xff08;头部&#xff09;插入一个或多个值。示例&#xff1a;LPUSH fruits apple banana → 列表变为 [banana, apple]LPUSHX 只有列表已存在时才会执行…
阅读更多...
【python】相机输出图片时保留时间戳数据

【python】相机输出图片时保留时间戳数据

有时候需要参考时间戳&#xff0c;写个笔记记录下 但是输出时间可能不稳&#xff0c;有待进一步优化 import cv2 import time import os# 创建一个保存图像的文件夹 output_folder "camera_images" if not os.path.exists(output_folder):os.makedirs(output_folder…
阅读更多...
(Nginx)基于Nginx+PHP 驱动 Web 应用(上):配置文件与虚拟主机篇

(Nginx)基于Nginx+PHP 驱动 Web 应用(上):配置文件与虚拟主机篇

1.应用场景 主要用于学习基于 Nginx PHP 驱动 Web 应用&#xff08;上&#xff09;&#xff1a; 配置文件与虚拟主机篇&#xff0c;学习弄清楚Nginx的常规操作&#xff0c;之前困惑的地方。 本文主要介绍了基于NginxPHP驱动Web应用的配置方法&#xff0c;重点讲解了Nginx配置…
阅读更多...
【golang长途旅行第34站】网络编程

【golang长途旅行第34站】网络编程

网络编程 基本介绍核心主题&#xff1a;​​ Golang面向大规模后端服务程序的设计目标中&#xff0c;网络通信是必不可少且至关重要的部分。​两种网络编程方式&#xff1a;​​​TCP Socket编程​ •性质&#xff1a;网络编程的主流 •底层协议&#xff1a;基于TCP/IP协议 •举…
阅读更多...
Hadoop（六）

Hadoop（六）

目录&#xff1a;1.Hadoop概述2.为什么需要分布式存储3.分布式的基础架构分析4.HDFS的基础架构1.Hadoop概述2.为什么需要分布式存储3.分布式的基础架构分析4.HDFS的基础架构
阅读更多...
Oracle 12g安装

Oracle 12g安装

1. 下载地址 官方网站 一般这种导向的进入的都是oracle的官方网站(先登录&#xff0c;如果没有就创建账号)&#xff0c;并没有真实的12g供你下载。需要你转入Oracle的云中下载&#xff1a;https://edelivery.oracle.com/osdc/faces/SoftwareDelivery 。我选择的是12.1.0.2.0下…
阅读更多...
ros2--service/服务--接口

ros2--service/服务--接口

获取service名称const char *get_service_name() const;std::string client_name client_->get_service_name();RCLCPP_INFO(this->get_logger(), "Client name: %s", client_name.c_str());
阅读更多...
安卓开发---SimpleAdapter

安卓开发---SimpleAdapter

概念&#xff1a;SimpleAdapter 是 Android 中比 ArrayAdapter 更强大的适配器&#xff0c;用于将复杂的数据绑定到复杂的布局&#xff0c;支持将 Map 中的数据映射到布局中的多个 View。方法签名&#xff1a;public SimpleAdapter( Context context, //上下文 List<? exte…
阅读更多...
软考-系统架构设计师 办公自动化系统(OAS)详细讲解

软考-系统架构设计师 办公自动化系统(OAS)详细讲解

个人博客&#xff1a;blogs.wurp.top 一、OAS的核心概念与演进 1. 什么是OAS&#xff1f; OAS是一个综合性的信息系统&#xff0c;它利用计算机技术、通信技术、系统科学和行为科学&#xff0c;为组织的日常办公事务、信息管理和协同工作提供支持。其本质是将传统办公流程电…
阅读更多...
leetcode 155 官方golang标准答案错误

leetcode 155 官方golang标准答案错误

真是误人子弟&#xff0c;leetcode155题官网的golang答案是错误的。push方法的append操作&#xff0c;必然不能保证是o(1)的时间复杂度。就这还是官网的标准答案&#xff0c;就这水平&#xff0c;&#x1f604;leetcode误人子弟不是第一次了。光会刷算法&#xff0c;可惜水平还…
阅读更多...
开源 python 应用 开发（十三）AI应用--百度智能云TTS语音合成

开源 python 应用 开发（十三）AI应用--百度智能云TTS语音合成

最近有个项目需要做视觉自动化处理的工具&#xff0c;最后选用的软件为python&#xff0c;刚好这个机会进行系统学习。短时间学习&#xff0c;需要快速开发&#xff0c;所以记录要点步骤&#xff0c;防止忘记。 链接&#xff1a; 开源 python 应用 开发&#xff08;一&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023