2024-08-10发表2024-08-10更新编程 / Javascript小白6 分钟读完 (大约861个字)0次访问

22 JavaScript 事件处理之事件的概念

在上一篇中，我们探讨了如何通过 DOM 操作创建和删除元素。现在，我们将深入了解 JavaScript 中的事件及其概念。事件是用户与网页交互的方式，比如点击按钮、输入文本或移动鼠标等。

什么是事件？

在 JavaScript 中，事件是指在文档对象模型（DOM）中的某个元素上发生的一些动作。当这些动作发生时，浏览器会生成一个事件并触发相应的处理程序（也称为事件处理器）。这些事件不仅限于用户交互，还可以包括诸如页面加载完成、表单提交等。

常见的事件包括：

click：鼠标单击事件
keydown：键盘按键按下事件
keyup：键盘按键释放事件
mouseover：鼠标移到元素上事件
submit：表单提交事件

事件的模型

在 JavaScript 中，事件的处理遵循以下基本模型：

事件生成：当某个动作（如单击）发生时，浏览器会生成一个事件。
事件传播：事件会按照一定的顺序传播，主要有两种传播方式：捕获和冒泡。
- 捕获：事件从 window 对象向目标元素传播。
- 冒泡：事件从目标元素向 window 对象传播。
事件处理：开发者可以为事件定义特定的处理程序，响应这些事件。

事件对象

当事件发生时，浏览器会创建一个事件对象，该对象包含了关于事件的详细信息，比如事件的类型、目标元素、按下的键等。我们可以在事件处理程序中使用这个对象来获取相关信息。

例如，在点击事件中，事件对象可以让我们访问 event.target 属性，该属性指向触发事件的元素。

1
2
3

document.getElementById("myButton").addEventListener("click", function(event) {
    console.log("你点击了按钮！目标元素是：", event.target);
});

在这个例子中，event.target 会返回我们点击的按钮元素。

示例：简单的按钮点击事件

假设我们有一个简单的 HTML 页面，其中包含一个按钮，用户可以通过单击按钮触发事件。

<!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>
    <script src="script.js"></script>
</body>
</html>

在 script.js 中，我们可以使用以下代码来处理按钮的点击事件：

document.getElementById("myButton").addEventListener("click", function(event) {
    alert("按钮被点击了！");
    console.log("事件类型:", event.type);
});

当用户单击按钮时，会弹出一个警告框，且在控制台中打印出事件的类型。

总结

在本篇中，我们介绍了事件的基本概念、传播模型以及如何使用事件对象捕获事件信息。理解这些概念是处理用户交互并创建动态网页的基础。在下一篇中，我们将学习如何添加事件监听器，以便更灵活地管理网页中的事件。

希望你能在实际项目中运用这些知识，帮助你构建更具互动性的网页！如果你有任何疑问，欢迎在下方留言。

22 JavaScript 事件处理之事件的概念

https://zglg.work/javascript-zero/22/

作者

IT教程网(郭震)

发布于

2024-08-10

更新于

2024-08-10

许可协议

#Javascript小白

22 JavaScript 事件处理之事件的概念

什么是事件？

事件的模型

事件对象

示例：简单的按钮点击事件

总结

作者

发布于

更新于

许可协议

分享转发

学习下节

复习上节

交流

打卡评论