HTML DOM addEventListener() 方法

语法

addEventListener()方法的语法如下：

element.addEventListener(event, function, useCapture);

• element：表示要添加事件监听器的元素。
• event：表示要监听的事件类型，如click、mouseover等。
• function：表示在事件发生时要执行的函数。
• useCapture：一个可选的布尔值，指定事件是在捕获阶段还是冒泡阶段执行，默认为false（在冒泡阶段执行）。

示例

让我们来看一个简单的示例，当用户点击一个按钮时，在控制台输出一条信息：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>addEventListener 示例</title>
</head>
<body>
  <button id="myButton">点击我</button>
  
  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', function() {
      console.log('按钮被点击了！');
    });
  </script>
</body>
</html>

在这个示例中，我们首先获取了一个按钮元素，然后使用addEventListener()方法在按钮上添加了一个点击事件监听器。当用户点击按钮时，控制台会输出按钮被点击了！。

多个事件监听器

addEventListener()方法还可以多次调用，以添加多个事件监听器。这些事件监听器将按照它们被添加的顺序依次执行。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>多个事件监听器示例</title>
</head>
<body>
  <button id="myButton">点击我</button>
  
  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', function() {
      console.log('第一个事件监听器');
    });
    
    button.addEventListener('click', function() {
      console.log('第二个事件监听器');
    });
  </script>
</body>
</html>

在这个示例中，我们为按钮添加了两个点击事件监听器。当用户点击按钮时，控制台会依次输出第一个事件监听器和第二个事件监听器。

总结

addEventListener()方法是 web 前端开发中常用的方法之一，它可以方便地为页面元素添加事件监听器，实现页面与用户的交互。希望本文对你理解这个方法有所帮助！