事件是在你编写的程序中发生的特定行为，系统会传递这些事件的信息，以便你的代码能够做出相应的反应。举个例子，当用户在网页上点击一个按钮时，你可能希望通过弹出一个信息框来回应这一操作。
什么是事件？
事件是在编写的程序中产生的特定情况。当这些事件出现时，系统会发出信号，并提供一种机制，允许你自动执行某些操作（比如运行代码）。这些事件通常是在浏览器窗口内触发的，关联到其中的特定元素。这可以是单个元素、一组元素、当前加载的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>
<button id="myButton">点击我!</button>
<script>
const button = document.getElementById('myButton');
button.onclick = function() {
alert('按钮被点击了!');
};
</script>
</body>
</html>
onclick事件处理器在用户单击按钮时被触发，随后通过 alert() 函数显示一条消息。这是事件处理的基本形式。
使用 addEventListener()
addEventListener() 方法是现代 JavaScript 中注册事件处理器的推荐方式。它允许我们添加多个事件监听器，并在需要时方便地移除这些监听器。
添加事件监听器
使用 addEventListener()方法来添加事件监听器，可以接受三个参数：
- 事件类型（字符串，例如
'click'）。 - 事件处理函数。
- 可选的配置对象（布尔值或对象）。
button.addEventListener('click', function() {
alert('按钮被点击了！');
});监听其他事件
除了 click 事件，addEventListener() 还能处理多种类型的事件，例如：
-
input：当用户输入内容时触发。 -
mouseover：当鼠标悬停在元素上时触发。 -
keydown：当按下键盘键时触发。
<input id="myInput" type="text" placeholder="输入一些文本..." />
<script>
const input = document.getElementById('myInput');
input.addEventListener('input', function() {
console.log('当前输入的内容:', this.value);
});
</script>移除监听器
可以使用 removeEventListener() 方法移除之前添加的监听器。需要确保传递的处理函数与添加时完全相同。
function handleClick() {
alert('按钮被点击了！');
}
button.addEventListener('click', handleClick);
// 在需要时可以移除监听器
button.removeEventListener('click', handleClick);在单个事件上添加多个监听器
addEventListener() 允许为相同的事件类型注册多个处理程序，这样就可以实现各自独立的行为。
button.addEventListener('click', function() {
alert('第一次处理！');
});
button.addEventListener('click', function() {
alert('第二次处理！');
});这个例子中，单击按钮将依次触发两个不同的事件处理程序。
其他事件监听器机制
事件处理器属性
除了 addEventListener() 和 removeEventListener() 方法外，HTML 元素还可以使用事件处理器属性。这种方法虽然有效，但并不推荐使用，它会使代码的结构较为混乱。
<button id="myButton" onclick="alert('按钮被点击了！')">点击我!</button>内联事件处理器——不要使用
虽然在HTML中使用内联事件处理器很方便，但这不是一个好习惯。它减少了代码的可维护性，增加了耦合度。建议使用 addEventListener()。
事件对象
当事件发生时，JavaScript会生成一个事件对象，包含有关事件的详细信息。在事件处理程序中，可以通过参数访问此对象。
事件对象的额外属性
以下是一些常用的事件对象属性：
-
target：事件的目标元素。 -
type：事件的类型（例如 click）。 -
preventDefault()：阻止默认事件发生，如在表单提交时防止页面刷新。 -
stopPropagation()：停止事件冒泡。
button.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认行为
console.log('事件类型:', event.type);
console.log('事件目标:', event.target);
});阻止默认行为
在某些情况下，您可能希望阻止浏览器执行事件的默认行为。例如，提交一个表单时，默认行为是刷新页面。可以通过调用 event.preventDefault() 实现。
<form id="myForm">
<input type="text" placeholder="输入文本" />
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单的默认提交
alert('表单提交被阻止！');
});
</script>事件并不独占于网页
事件并不是 JavaScript 独有的，大多数编程语言都有自己的事件模型，而这些模型的实现方式常常各不相同。实际上，网页中使用的 JavaScript 事件模型与其他环境下的 JavaScript 事件模型也存在差异。
例如，Node.js 是一个广受欢迎的 JavaScript 运行时，允许开发者使用 JavaScript 构建网络和服务器端应用程序。在 Node.js 中，事件模型依赖于监听器来监控事件，而发射器则用来定期触发事件。虽然听起来没有什么不同，但在代码实现上却大相径庭，比如使用 on() 函数注册事件监听器，而 once() 则用于注册一个一次性的事件监听器，该监听器运行一次后会自动注销。HTTP 连接事件文档就是一个很好的例子。
另外，你还可以通过一种名为 WebExtensions 的技术来编写 JavaScript，以创建跨浏览器的扩展功能。这种事件模型与网页中的事件模型类似，但有所不同——事件监听器的属性采用驼峰命名法（例如 onMessage 而不是 onmessage），并且需要与 addListener 函数结合使用。
其他语言的事件模型
- Java：Java Swing 和 JavaFX 提供事件处理基本机制，用监听器在 UI 组件上处理事件。
- Python：像 Tkinter 和 PyQt 框架也实现了事件驱动的编程范式，允许定义和处理事件。
- C#：使用 .NET 的事件模型，允许定义事件并在某些条件下触发相应的事件处理程序。
如有表述欠缺之处还请各位佬指正。
标签：WEB,系列,JavaScript,51,事件,监听器,addEventListener,click,处理器 From： https://blog.csdn.net/LEECOO666/article/details/143151547