📌  相关文章
📜  addeventlistener js 选择项 - Javascript (1)

📅  最后修改于: 2023-12-03 15:29:17.692000             🧑  作者: Mango

添加事件监听器的 JS 选择项

在 JavaScript 中，我们可以使用 addEventListener 方法来添加事件监听器。这个方法允许我们监听多种事件类型，并且能够在特定事件发生时执行指定的代码。

语法

要使用 addEventListener 添加事件监听器，需要使用以下语法：

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

这里的 target 指的是我们要监听事件的对象，它可以是任何 DOM 元素。type 则是要监听的事件类型，如 click、mouseup、keydown 等等。listener 是事件发生时要执行的函数。注意，这里传递的函数不要加括号，否则会在添加监听器时就直接执行了。最后，options 参数是一个对象，可以包含一些附加的选项（如 capture、once 等），可选。

需要注意的是，如果要添加多个监听器，可以使用 target.addEventListener 多次调用。但是，如果要移除监听器则需要使用 target.removeEventListener 方法。

下面是一个简单的例子：

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

function handleClick() {
  alert('Button clicked!');
}

button.addEventListener('click', handleClick);
示例

下面是一个更完整的示例，这个例子展示了如何使用 addEventListener 来监听多种事件类型，并且如何在事件处理程序中使用 this 关键字来访问事件目标。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Add Event Listener Example</title>
</head>
<body>
  <button>Click me!</button>
  <script>
    const button = document.querySelector('button');

    function handleEvent(event) {
      alert('Event type: ' + event.type + '\nTarget: ' + this.tagName + '\nThis: ' + this.tagName);
    }

    button.addEventListener('click', handleEvent);
    button.addEventListener('mouseover', handleEvent);
    button.addEventListener('keydown', handleEvent);
  </script>
</body>
</html>

上面的代码添加了三个事件监听器，分别监听 click、mouseover 和 keydown 事件。当事件发生时，将会弹出一个对话框，显示事件类型、事件目标和 this 关键字分别是什么。

我们可以根据需求添加不同的事件类型和相应的事件处理程序，以达到我们想要的效果。

结论

在 JavaScript 中，使用 addEventListener 添加事件监听器是非常常见的技术。这个方法可以让我们在任何 DOM 元素上监听各种事件类型，并且在事件发生时执行一些指定的代码。希望这篇文章可以帮助你更好地理解和使用事件监听器。