Vanilla JS 点击 - Javascript

Vanilla JS 是纯粹的 Javascript，没有任何依赖库和框架。在本篇介绍中，我们将学习如何使用 Vanilla JS 来处理点击事件。

添加点击事件监听器

要监听元素的点击事件，我们需要向元素添加一个事件监听器。首先，我们需要选中我们想要监听点击事件的元素。可以通过 document.getElementById()、document.querySelector()、document.querySelectorAll() 或其他类似方法来选中元素。

然后，我们可以使用 addEventListener() 方法来向元素添加点击事件监听器。该方法接受两个参数：event 和 callback，其中 event 指定要监听的事件类型，callback 是在事件被触发时要执行的操作。

下面是一个示例代码段，演示了如何向按钮添加一个点击事件监听器，当点击按钮时将弹出 Hello World! 的对话框：

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Hello World!');
});

阻止默认行为

在某些情况下，单击元素时不仅会触发点击事件，还会执行默认行为。例如，单击链接会导致导航到新网页；单击表单的提交按钮会导致提交表单。如果我们不希望执行默认行为，我们可以通过事件对象的 preventDefault() 方法来阻止该行为的发生。

下面是一个示例代码段，演示了如何阻止链接的默认行为（即导航到新网页）：

const link = document.querySelector('a');
link.addEventListener('click', (event) => {
  event.preventDefault();
});

在这个示例中，当点击链接时，preventDefault() 方法会阻止链接的默认行为。这使得我们可以执行其他操作，比如使用 JavaScript 执行一些操作，或者采取其他措施来代替默认行为。

只处理一次点击事件

如果我们只想处理一次点击事件，我们可以使用 removeEventListener() 方法来从元素中删除事件监听器。该方法接受两个参数：event 和 callback，其中，event 指定要删除的事件类型，callback 是要从元素中删除的监听器函数。

下面是一个示例代码段，演示了如何添加一个事件监听器，使其只在第一次单击按钮时执行，并从元素中删除监听器：

const button = document.querySelector('button');

// 定义函数来处理点击事件
function handleClick() {
  alert('Hello World!');

  // 从元素中删除监听器
  button.removeEventListener('click', handleClick);
}

// 向按钮添加事件监听器
button.addEventListener('click', handleClick);

在这个示例中，每次单击按钮时，都会执行 handleClick() 函数一次，然后从按钮中删除它。这样，我们只在第一次单击按钮时弹出 “Hello World!” 对话框。

结论

这是使用 Vanilla JS 处理点击事件的简单示例。需要记住的关键点是：

• 使用 addEventListener() 方法来向元素添加事件监听器。
• 使用事件对象的 preventDefault() 方法来阻止执行默认行为。
• 使用 removeEventListener() 方法来从元素中删除事件监听器，并使其只处理一次点击事件。

希望这篇介绍对你有所帮助！