JavaScript - 事件（Events）

JavaScript - 事件（Events）

在 JavaScript 中，事件是与 HTML 元素相关联的动作或发生的事情。例如，当用户单击按钮、鼠标移到元素上或提交表单时，都会触发相应的事件。

1. 事件监听器（Event Listeners）

要处理事件，我们可以使用事件监听器。事件监听器可以捕获并响应特定事件的发生。下面是添加事件监听器的基本语法：

element.addEventListener(eventName, eventHandler);

其中，element 是要监听事件的 HTML 元素，eventName 是要监听的事件名称，eventHandler 是事件触发后要执行的函数。

例如，我们可以为按钮添加点击事件监听器：

const button = document.querySelector('#myButton');
button.addEventListener('click', handleClick);

function handleClick(event) {
  // 在这里编写处理点击事件的逻辑
}

2.常见的事件

JavaScript 支持许多常见的事件，包括但不限于：

1. click：当元素被点击时触发。
2. mouseover：当鼠标指针移到元素上时触发。
3. change：当表单元素的值发生改变时触发。
4. submit：当表单提交时触发。
5. keydown：当键盘按键按下时触发。

3.事件对象（Event Object）

在事件处理函数中，可以通过事件对象来访问有关事件的详细信息。事件对象包含有关事件类型、目标元素等属性。

例如，我们可以使用事件对象获取鼠标指针的坐标：
function handleMouseOver(event) {
  const x = event.clientX;
  const y = event.clientY;
  console.log(`鼠标位置：(${x}, ${y})`);
}

4.阻止默认行为（Preventing Default Behavior）

有时候我们需要阻止事件的默认行为。例如，在表单提交时阻止页面跳转。

const form = document.querySelector('#myForm');
form.addEventListener('submit', handleSubmit);

function handleSubmit(event) {
  event.preventDefault(); // 阻止表单提交的默认行为

  // 在这里编写处理表单提交的逻辑
}

以上是 JavaScript 中事件的基本概念和使用方法的介绍。通过事件监听器和事件对象，我们可以实现丰富的交互和动态效果