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

JavaScript的Web APIs 入门到实战（day2）：事件监听与交互实现，轻松实现网页交互效果（附练习巩固）

news 2025/11/5 8:35:39

        在 Web 前端开发中，实现网页交互性是提升用户体验的核心。通过 JavaScript 的 Web APIs，我们可以为 DOM 元素注册事件，实现各种响应式的网页特效。本文将详细介绍事件监听的核心概念、实现方法及相关技术点。

一、事件与事件监听

什么是事件？

        事件是编程语言中描述程序行为或状态变化的术语。当特定行为或状态发生时，会触发相应的处理函数。在网页中，常见的事件包括：

  • 用户点击按钮（click）
  • 鼠标经过元素（mouseover）
  • 键盘按键（keydown）
  • 表单输入（input）等

什么是事件监听？

        事件监听是指为 DOM 元素添加事件监测机制，当指定事件发生（触发）时，自动执行预设的处理函数。在 JavaScript 中，我们使用 addEventListener 方法实现事件监听，其语法结构如下：

DOM元素.addEventListener('事件类型', 事件处理函数);

二、事件三要素

实现事件监听需要明确三个核心要素：

  1. 事件源：被触发事件的 DOM 元素（需要先获取该元素）
  2. 事件类型：触发事件的方式（如点击、鼠标经过等，需用引号包裹）
  3. 事件处理函数：事件触发后执行的逻辑（每次触发都会执行）

实例演示：点击按钮改变文字颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件监听示例</title>
</head>
<body><h3>事件监听演示</h3><p id="text">这是一段可变色的文字</p><button id="btn">点击改变颜色</button><script>// 1. 获取事件源（按钮元素）const btn = document.querySelector('#btn');// 2. 添加事件监听（事件类型为click，处理函数为匿名函数）btn.addEventListener('click', function() {// 3. 事件处理逻辑：改变文字颜色const text = document.querySelector('#text');text.style.color = 'red';});</script>
</body>
</html>

三、事件类型分类

根据交互方式的不同，事件可分为以下几类：

1. 鼠标事件

  • click：鼠标单击
  • dblclick：鼠标双击
  • mouseenter：鼠标移入元素
  • mouseleave：鼠标离开元素

示例：鼠标移入移出效果

<!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>div {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div></div><input type="text"><script>const div = document.querySelector('div')// 1.鼠标触发//鼠标经过div.addEventListener('mouseenter', function () {div.style.backgroundColor = 'skyblue'})// 鼠标离开div.addEventListener('mouseleave', function () {div.style.backgroundColor = 'red'})</script>
</body></html>

2. 键盘事件

  • keydown：键盘按下时触发
  • keyup：键盘抬起时触发

示例：监听回车键

<input type="text" placeholder="按回车提交">
<script>const input = document.querySelector('input');input.addEventListener('keyup', function(e) {if (e.key === 'Enter') {console.log('提交内容：', this.value);}});
</script>

3. 表单与焦点事件

  • focus：元素获得焦点（如输入框被点击）
  • blur：元素失去焦点（如输入框被点击后又点击其他地方）
  • input：表单元素内容发生变化时触发

四、事件对象

        当事件被触发时，浏览器会自动创建一个事件对象，包含与该事件相关的详细信息。事件处理函数的第一个参数即为事件对象，通常命名为 e、event 或 ev。

常用事件对象属性

  • type：事件类型（如 'click'、'keyup'）
  • clientX/clientY：光标相对于浏览器窗口的坐标
  • offsetX/offsetY：光标相对于当前元素的坐标
  • key：键盘事件中按下的键值

示例：获取鼠标位置

<button>点击我</button>
<script>const btn = document.querySelector('button');btn.addEventListener('click', function(e) {console.log('事件类型：', e.type);console.log('相对于窗口位置：', e.clientX, e.clientY);console.log('相对于按钮位置：', e.offsetX, e.offsetY);});
</script>

五、环境对象 this

        在函数内部，this 是一个特殊的环境变量，代表当前函数运行时所处的环境。其值取决于函数的调用方式：

  • 普通函数调用时，this 指向 window
  • 事件处理函数中，this 指向触发事件的 DOM 元素（事件源）

示例：使用 this 简化代码

<button>点击变色</button>
<script>const btn = document.querySelector('button');btn.addEventListener('click', function() {// this 指向当前点击的按钮元素this.style.color = 'red';this.style.backgroundColor = 'black';});
</script>

六、事件监听的不同方式

1. 传统方式（L0 事件）

通过 on 前缀绑定事件，特点是同一事件只能绑定一个处理函数（后面的会覆盖前面的）。

const btn = document.querySelector('button');
btn.onclick = function() {console.log('第一次点击'); // 不会执行
};
btn.onclick = function() {console.log('第二次点击'); // 只会执行这个
};

2. 推荐方式（L2 事件）

使用 addEventListener 方法，支持同一事件绑定多个处理函数，按绑定顺序执行。

const btn = document.querySelector('button');
btn.addEventListener('click', function() {console.log('第一次点击');
});
btn.addEventListener('click', function() {console.log('第二次点击');
});
// 点击后会依次输出两次日志

七、回调函数

        当一个函数作为参数传递给另一个函数时，这个函数就称为回调函数。在事件监听中，事件处理函数本质上就是回调函数。

常见回调函数场景：

// 1. 事件监听中的回调函数
btn.addEventListener('click', function() {console.log('我是事件回调函数');
});// 2. 定时器中的回调函数
setInterval(function() {console.log('我是定时器回调函数');
}, 1000);

八、巩固练习

        以下 3 道练习题从基础到综合，分别对应事件绑定、事件对象应用、综合交互场景，帮助你巩固事件监听核心知识点。

练习 1：基础题 - 按钮控制元素显隐

需求
  1. 页面中有 1 个 “显示 / 隐藏” 按钮和 1 个默认隐藏的红色方块（宽高 200px）。
  2. 点击按钮时，切换方块的显示状态（显示→隐藏，隐藏→显示），同时按钮文字也同步切换（“显示”→“隐藏”，“隐藏”→“显示”）。
答案代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>按钮控制显隐</title><style>.box {width: 200px;height: 200px;background-color: red;/* 默认隐藏 */display: none;margin-top: 10px;}</style>
</head>
<body><button id="toggleBtn">显示</button><div class="box"></div><script>// 1. 获取事件源：按钮和方块const toggleBtn = document.querySelector('#toggleBtn');const box = document.querySelector('.box');// 2. 绑定点击事件toggleBtn.addEventListener('click', function() {// 3. 切换方块显示状态if (box.style.display === 'block' || box.style.display === '') {box.style.display = 'none';this.textContent = '显示'; // this指向按钮} else {box.style.display = 'block';this.textContent = '隐藏';}});</script>
</body>
</html>

练习 2：进阶题 - 键盘控制 div 移动

需求
  1. 页面中有 1 个黑色方块（宽高 100px，初始位置在页面左上角）。
  2. 按下键盘的 “上、下、左、右” 箭头键时，方块向对应方向移动（每次移动 10px）。
  3. 需通过事件对象的key属性判断按下的是哪个方向键。
答案代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>键盘控制移动</title><style>.box {width: 100px;height: 100px;background-color: black;/* 绝对定位实现移动 */position: absolute;top: 0;left: 0;}</style>
</head>
<body><div class="box"></div><script>// 1. 获取方块元素const box = document.querySelector('.box');// 初始化位置（单位：px）let topPos = 0;let leftPos = 0;// 2. 给document绑定键盘抬起事件（全局监听键盘）document.addEventListener('keyup', function(e) {// 3. 通过事件对象e.key判断方向键switch(e.key) {case 'ArrowUp':topPos -= 10;break;case 'ArrowDown':topPos += 10;break;case 'ArrowLeft':leftPos -= 10;break;case 'ArrowRight':leftPos += 10;break;}// 4. 更新方块位置box.style.top = topPos + 'px';box.style.left = leftPos + 'px';});</script>
</body>
</html>

练习 3：综合题 - 表单实时验证

需求
  1. 页面中有 1 个输入框（要求输入 6-12 位密码，包含数字和字母）和 1 个提示文本（默认隐藏）。
  2. 输入框输入内容时（input事件），实时验证内容：
    • 长度小于 6 位：提示 “密码长度不能少于 6 位”，颜色为红色。
    • 长度大于 12 位：提示 “密码长度不能超过 12 位”，颜色为红色。
    • 长度符合要求但不含数字 / 字母：提示 “密码需包含数字和字母”，颜色为红色。
    • 全部符合要求：提示 “密码格式正确”，颜色为绿色。
  3. 输入框失去焦点（blur事件）时，若内容为空，提示 “密码不能为空”，颜色为红色。
答案代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单实时验证</title><style>.tip {margin-top: 5px;font-size: 14px;display: none; /* 默认隐藏提示 */}</style>
</head>
<body><label>密码：</label><input type="text" id="password" placeholder="请输入6-12位密码（含数字和字母）"><div class="tip" id="tip"></div><script>// 1. 获取元素：输入框和提示文本const password = document.querySelector('#password');const tip = document.querySelector('#tip');// 2. 实时输入验证（input事件）password.addEventListener('input', function() {const val = this.value; // 输入框内容const hasNum = /\d/.test(val); // 判断是否含数字const hasLetter = /[a-zA-Z]/.test(val); // 判断是否含字母// 显示提示tip.style.display = 'block';// 验证逻辑if (val.length < 6) {tip.textContent = '密码长度不能少于6位';tip.style.color = 'red';} else if (val.length > 12) {tip.textContent = '密码长度不能超过12位';tip.style.color = 'red';} else if (!hasNum || !hasLetter) {tip.textContent = '密码需包含数字和字母';tip.style.color = 'red';} else {tip.textContent = '密码格式正确';tip.style.color = 'green';}});// 3. 失去焦点验证（blur事件）password.addEventListener('blur', function() {if (this.value === '') {tip.style.display = 'block';tip.textContent = '密码不能为空';tip.style.color = 'red';}});</script>
</body>
</html>

总结

通过本文学习，我们掌握了：

  1. 事件三要素：事件源、事件类型、事件处理函数
  2. 常用事件类型：鼠标事件、键盘事件、表单事件等
  3. 事件对象的使用：获取事件相关信息
  4. 环境对象 this 的指向规则
  5. 事件监听的两种方式及区别
http://www.dtcms.com/a/569074.html

相关文章：

  • 网站建设难么深圳网站制作服
  • 使用vue Template version: 1.3.1时, 设置的env无法正常读取
  • HOT100题打卡第28天——位运算
  • EasyOCR的模型放在了哪里
  • 18、【Ubuntu】【远程开发】技术方案分析：私网ip掩码
  • 做购物网站哪个cms好用企业支付的网站开发费如何入帐
  • 怎样将自己做的网站给别人看微信小程序网站建设
  • 【软考】信息系统项目管理师-质量管理论文范文
  • (T24) 跨时钟域SI-＞Q path的latch选型
  • 学习记录记录记录记录
  • 【JAVA】基础（一）
  • Coze-AI智能体开发平台4-应用
  • day_06_06方法的参数值传递机制
  • 选用铜做电线的底层逻辑
  • 守护数据的最后一道防线：深入浅出TDE透明数据加密技术
  • Hadess零基础学习，如何管理通用Generic制品
  • 【数论】裴蜀定理与扩展欧几里得算法 (exgcd)
  • 新北区城乡建设局网站wordpress 瑜伽课程
  • 解读ffmpeg控制台输出
  • SQL Server 集群网络架构详解
  • php做视频网站源码上海建设网站公
  • 外国网站上做Taskvs2012网站开发环境
  • STM32的串口（上位机控制下位机）
  • Anthropic 经济指数报告：地理和企业人工智能采用的不均衡性
  • 美工免费素材网站淮南网格员招聘
  • 坐标系转换快速定位问题
  • ELK学习笔记
  • 2025世界职业院校技能大赛：10分钟展演黄金时间分配
  • rust表格文件处理
  • 基于VU13P的6U VPX 载板