如果做出反应 - Javascript

Javascript 是一种非常灵活的编程语言，因为它可以对用户的行为做出反应，即所谓的“事件驱动”。

当用户与页面交互时，例如点击按钮、滚动页面等等，Javascript 可以在用户进行这些操作时立即做出反应，从而增强页面的交互性和用户体验。

事件监听

要漂亮地响应这些事件，我们需要使用一些 Javascript 方法。下面介绍一些监听事件的常用方法。

addEventListener()

该方法用于向指定的事件目标添加事件句柄。语法如下：

target.addEventListener(type, listener[, useCapture]);

• type：必需，表示事件类型的字符串。
• listener：必需，表示处理事件函数的函数名（或函数引用）。
• useCapture：可选，表示一个布尔值，指定事件是否在捕获或冒泡阶段执行。

例如，要在按钮被点击时执行一个函数，可以这样写：

const btn = document.querySelector('button');
btn.addEventListener('click', function() {
  console.log('按钮被点击了！');
});

removeEventListener()

该方法用于从指定的事件目标中删除事件句柄。语法如下：

target.removeEventListener(type, listener[, useCapture]);

• type：必需，表示事件类型的字符串。
• listener：必需，表示处理事件函数的函数名（或函数引用）。
• useCapture：可选，表示一个布尔值，指定事件是否在捕获或冒泡阶段执行。

例如，要删除按钮的点击事件监听器，可以这样写：

const btn = document.querySelector('button');
const handleClick = function() {
  console.log('按钮被点击了！');
};
btn.addEventListener('click', handleClick);
// ...
btn.removeEventListener('click', handleClick);

常见的事件类型

除了上面介绍的 click 事件以外，还有很多其他的事件类型可以监听。

mouseover

表示鼠标指针移动到一个元素上时触发的事件。

const box = document.querySelector('.box');
box.addEventListener('mouseover', function() {
  console.log('鼠标指针移动到了元素上面！');
});

mouseout

表示鼠标指针移出一个元素时触发的事件。

const box = document.querySelector('.box');
box.addEventListener('mouseout', function() {
  console.log('鼠标指针移出了元素！');
});

keydown

表示当用户按下键盘上的任何键时触发的事件。

document.addEventListener('keydown', function(event) {
  console.log(`用户按下了键盘上的${event.key}键！`);
});

scroll

表示当元素滚动时触发的事件。

window.addEventListener('scroll', function() {
  console.log('页面滚动了！');
});

总结

在 Javascript 中，事件监听器是响应用户操作的核心。我们可以使用 addEventListener() 方法添加事件监听器，使用 removeEventListener() 方法删除事件监听器，从而处理各种事件类型。

以上仅为 Javascript 事件监听器的基础知识，不同的应用场景可能还需要其他的方法和技巧。希望这篇文章能够帮助你更好地理解 Javascript 中的事件处理机制。