【JavaScript】事件处理（添加事件监听器、事件对象）

文章目录

- [1. 添加事件监听器](#1. 添加事件监听器)
- - [通过 HTML 属性](#通过 HTML 属性)
  - [通过 JavaScript](#通过 JavaScript)
- [2. 事件对象](#2. 事件对象)
- [3. 总结](#3. 总结)

在前端开发中，事件处理是 实现交互和响应用户行为 的重要环节。JavaScript 提供了丰富的事件处理机制，本篇博客将介绍如何通过 JavaScript 添加事件监听器以及如何使用事件对象进行更灵活的事件处理。

1. 添加事件监听器

通过 HTML 属性

在 HTML 标签中通过 on 开头的属性可以直接指定事件处理函数，例如：

html 复制代码

<button onclick="handleClick()">Click me</button>

在上述例子中，点击按钮时会调用名为 handleClick 的函数。

通过 JavaScript

通过 JavaScript 可以更灵活地添加事件监听器，使用 addEventListener 方法：

javascript 复制代码

let myButton = document.getElementById("myButton");

myButton.addEventListener("click", function() {
  alert("Button Clicked!");
});

在上述例子中，通过 addEventListener 方法为 ID 为 myButton 的按钮添加了一个点击事件的监听器，当按钮被点击时，会弹出一个提示框。

2. 事件对象

事件对象是在事件发生时由浏览器创建的对象，它包含了有关事件的信息，例如触发事件的元素、鼠标位置等。

事件处理函数参数

当事件处理函数被调用时，浏览器会自动传递一个事件对象作为参数，你可以通过这个参数访问事件对象的属性和方法：

javascript 复制代码

let myButton = document.getElementById("myButton");

myButton.addEventListener("click", function(event) {
  console.log("Event type: " + event.type);
  console.log("Mouse coordinates: " + event.clientX + ", " + event.clientY);
});

在上述例子中，事件处理函数接受一个参数 event，通过访问 event.type 和 event.clientX 等属性，可以获取事件的类型和鼠标位置。

阻止默认行为

有时候需要阻止事件的默认行为，比如阻止链接的跳转或表单的提交。可以使用 preventDefault 方法：

javascript 复制代码

let myLink = document.getElementById("myLink");

myLink.addEventListener("click", function(event) {
  event.preventDefault();
  alert("Link Clicked, but default behavior prevented!");
});

在上述例子中，点击链接时，虽然会触发事件处理函数，但由于调用了 preventDefault 方法，链接不会执行默认的跳转行为。

停止事件传播

在 DOM 树中，事件会按照捕获阶段和冒泡阶段传播，可以使用 stopPropagation 方法停止事件的传播：

javascript 复制代码

let parentElement = document.getElementById("parentElement");

parentElement.addEventListener("click", function() {
  alert("Parent Element Clicked!");
});

let childElement = document.getElementById("childElement");

childElement.addEventListener("click", function(event) {
  event.stopPropagation();
  alert("Child Element Clicked!");
});

在上述例子中，当点击子元素时，会触发子元素的点击事件处理函数，但由于调用了 stopPropagation 方法，事件不会传播到父元素，父元素的点击事件处理函数不会被触发。

3. 总结

添加事件监听器和使用事件对象是 JavaScript 中事件处理的两个关键方面。通过 addEventListener 方法，你可以动态地为元素添加不同类型的事件监听器，实现更丰富的用户交互。事件对象则提供了事件发生时的详细信息，帮助你更精确地处理事件。希望通过本篇博客，你对 JavaScript 事件处理的添加事件监听器与事件对象有了更深入的理解。