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

前端学习之JavaScript事件监听解析

news 2025/7/26 0:27:59

        今天我们来开启一个新的学习内容，事件监听，JavaScript 事件监听是一种机制，允许开发者在特定事件发生时执行相应的代码，从而实现网页的交互性。

        本文将从实际出发，讲解JavaScript有关于事件监听的基本知识点

一.事件监听的基本概念

        事件：HTML事件时发生在HTML元素上的“事情”。例如：按钮被点击，鼠标移动到元素上，按下键盘按键。

        事件监听：JavaScript可以在事件被侦测到时执行代码

二.事件绑定

        事件绑定是 JavaScript 里实现网页交互的重要手段，其作用是把特定事件（如点击、鼠标移动等）和对应的处理函数关联起来，当事件触发时，执行相应函数。下面介绍几种常见的事件绑定方式。

1.HTML 内联事件绑定

        在 HTML 标签中直接使用事件属性指定要执行的 JavaScript 代码。这种方式简单直接，但会让 HTML 和 JavaScript 代码耦合在一起，不利于维护。

<!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><!-- 点击按钮时调用 showAlert 函数 --><button onclick="showAlert()">点击我</button><script>function showAlert() {alert('你点击了按钮！');}</script>
</body>
</html>

2. DOM 属性事件绑定

        通过 JavaScript 为 DOM 元素的事件属性赋值一个函数。该方式能将 HTML 和 JavaScript 代码分离，但一个事件属性只能绑定一个处理函数。 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM 属性事件绑定</title>
</head>
<body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');// 为按钮的 click 事件绑定函数button.onclick = function() {alert('你点击了按钮！');};</script>
</body>
</html>

3. addEventListener() 方法绑定

(1).方法介绍

        addEventListener() 是推荐的事件绑定方式，支持为同一元素的同一事件绑定多个处理函数，还能控制事件在捕获或冒泡阶段执行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>addEventListener 事件绑定</title>
</head>
<body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');// 为按钮的 click 事件添加事件监听器button.addEventListener('click', function() {alert('第一次提示');});button.addEventListener('click', function() {alert('第二次提示');});</script>
</body>
</html>

(2).方法语法

element.addEventListener(event, function, useCapture);
  • event：必需，字符串类型，表示要监听的事件名称，如 click、mouseover、keydown 等。
  • function：必需，事件触发时要执行的函数。
  • useCapture：可选，布尔值，true 表示在捕获阶段执行事件处理函数，false 表示在冒泡阶段执行，默认值为 false。

(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><div id="outer"><div id="inner"></div></div><script>const outer = document.getElementById('outer');const inner = document.getElementById('inner');// 事件冒泡，默认 useCapture 为 falseouter.addEventListener('click', function() {console.log('外层 div 冒泡阶段触发');}, false);inner.addEventListener('click', function() {console.log('内层 div 冒泡阶段触发');}, false);// 事件捕获outer.addEventListener('click', function() {console.log('外层 div 捕获阶段触发');}, true);inner.addEventListener('click', function() {console.log('内层 div 捕获阶段触发');}, true);</script>
</body>
</html>

4. 移除事件绑定

使用 removeEventListener() 方法移除通过 addEventListener() 绑定的事件。

<!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><button id="myButton">点击我</button><button id="removeButton">移除事件绑定</button><script>const button = document.getElementById('myButton');const removeButton = document.getElementById('removeButton');function handleClick() {alert('按钮被点击了！');}button.addEventListener('click', handleClick);removeButton.addEventListener('click', function() {button.removeEventListener('click', handleClick);alert('事件绑定已移除');});</script>
</body>
</html>

注意： removeEventListener() 的第二个参数必须和 addEventListener() 的第二个参数是同一个函数引用，否则无法移除。

三.常见事件

1.鼠标事件

click： 鼠标点击元素（按下并释放）时触发

dblclick：鼠标双击元素时触发

mousedown：鼠标在元素上按下任意按键时触发

mouseup：鼠标在元素上释放按键时触发

mouseover：鼠标指针移入元素或其子元素时触发

mouseout：鼠标指针移出元素或其子元素时触发

mousemove：鼠标指针在元素内移动时持续触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标事件示例</title>
</head>
<body><button id="myButton">点击我</button><div id="myDiv">移动鼠标到这里</div><script>const button = document.getElementById('myButton');const div = document.getElementById('myDiv');button.addEventListener('click', () => alert('按钮被点击'));button.addEventListener('dblclick', () => alert('按钮被双击'));div.addEventListener('mousemove', () => console.log('鼠标在 div 内移动'));div.addEventListener('mouseover', () => console.log('鼠标移入 div'));div.addEventListener('mouseout', () => console.log('鼠标移出 div'));</script>
</body>
</html>

2.键盘事件

keydown：按下任意按键时触发，按住不放会重复触发

keyup：释放按键时触发

keypress：按下可打印字符按键时触发（现代开发中逐渐被 keydown 替代）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件示例</title>
</head>
<body><input type="text" id="myInput"><script>const input = document.getElementById('myInput');input.addEventListener('keydown', (event) => {console.log(`按下按键: ${event.key}`);});input.addEventListener('keyup', (event) => {console.log(`释放按键: ${event.key}`);});</script>
</body>
</html>

3.表单事件

submit：表单提交时触发，通常在点击提交按钮或按下回车键时发生

change：表单元素的值发生改变且失去焦点时触发

input：表单元素的值发生改变时实时触发

focus：表单元素获得焦点时触发

blur：表单元素失去焦点时触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单事件示例</title>
</head>
<body><form id="myForm"><input type="text" id="myTextInput"><input type="submit" value="提交"></form><script>const form = document.getElementById('myForm');const input = document.getElementById('myTextInput');form.addEventListener('submit', (event) => {event.preventDefault(); // 阻止表单默认提交行为alert('表单已提交');});input.addEventListener('input', (event) => {console.log(`输入内容: ${event.target.value}`);});input.addEventListener('blur', () => console.log('输入框失去焦点'));</script>
</body>
</html>

4.窗口事件

load：页面所有资源（包括图片、脚本等）加载完成时触发

DOMContentLoaded：HTML 文档解析完成，DOM 树构建完成时触发，不等待样式表、图片等资源加载

resize：浏览器窗口大小改变时触发

scroll：滚动窗口或滚动元素时触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>窗口事件示例</title>
</head>
<body><div style="height: 2000px;">滚动页面</div><script>window.addEventListener('load', () => console.log('页面所有资源加载完成'));document.addEventListener('DOMContentLoaded', () => console.log('DOM 加载完成'));window.addEventListener('resize', () => console.log('窗口大小改变'));window.addEventListener('scroll', () => console.log('页面正在滚动'));</script>
</body>
</html>
http://www.dtcms.com/a/294997.html

相关文章：

  • Bonk发币教学全流程
  • 欧盟网络安全标准草案EN 18031详解
  • JDialong弹窗
  • 计算机网络学习----Https协议
  • 亚马逊云科技 上海AI研究院 突然解散 | AI早报
  • 13. event.target 和 event.currentTarget 区别
  • 【C语言进阶】动态内存管理(2)
  • 力扣（LeetCode) ——轮转数组（C语言）
  • Unity UI的未来之路：从UGUI到UI Toolkit的架构演进与特性剖析(2)
  • 【Web APIs】JavaScript 节点操作 ⑦ ( 创建节点案例 | 网页评论功能 )
  • 旅游管理虚拟仿真实训室：重构实践教学新生态
  • 掌握Autofac：IOC容器实战指南
  • GaussDB view视图的用法
  • 分布式光伏发电项目简易故障录波装置介绍
  • [硬件电路-78]：模拟器件 - 从宏观到微观：高频信号下电路与光路的特性演变与挑战
  • Hexo - 免费搭建个人博客05 - 更新个人博客
  • GUI简介 - OpenExo
  • 回顾 Palantir：八年之旅的反思
  • ​​SBOM 软件供应链安全(转)
  • haproxy的七层代理
  • Day01_C++编程
  • Ollama（3）模型迁移和API使用
  • Modbus协议详解与c#应用
  • 重写 与 重载
  • pig cloud框架中引入websocket
  • nginx websocket 代理 断网后 再联网 不能连接
  • Windows下编译UTF8-CPP
  • 前端学习 5：DFT
  • 云效CI/CD教程(PHP项目)
  • 如何提升连带消费？从新零售“人-货-场”模型拆解