JavaScript - addEventListener() 方法

JavaScript addEventListener() 方法用于将事件处理函数附加到 HTML 元素。这允许您指定在指定元素上发生特定事件时执行的函数。

事件是指特定的事件或操作，例如用户点击、键盘按下或页面加载。浏览器会检测这些事件并触发相关的 JavaScript 函数(称为事件处理函数)进行相应的响应。

开发者使用"addEventListener()"方法，在特定 HTML 元素发生这些事件时，将其与特定的函数行为关联起来。事件示例包括点击、鼠标移动、键盘输入和文档加载。

语法

addEventListener() 的基本语法如下:

element.addEventListener(event, function, options);

此处的 element 是一个 HTML 元素，例如按钮、输入框或 div，可以使用 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector 等方法进行选择;这些只是几个示例。事件监听器会附加到这个特定元素上。

参数

addEventListener() 方法接受以下参数 -

• event - 一个包含操作类型的字符串 - 例如，"click"、"mouseover"或"keydown"等;将作为我们执行指定函数的触发器。

• function - 当指定事件发生时，将调用命名函数、匿名函数或对现有函数的引用;它本质上是在预定实例中执行的操作。

• options(可选) - 它允许指定其他设置，特别是捕获或一次性与事件监听器相关的行为。

示例

示例:点击按钮时发出警报

在此示例中，我们将显示一个简单的按钮，点击后会在屏幕上显示警报。addeventlistener 将负责处理点击事件，这意味着它将调用 handleClick 函数，该函数在按钮被点击时向屏幕发出警报。我们使用 getElementById 来获取要绑定事件监听器的按钮。

这是一个在提交表单、登录、注册等操作中常用的事件。

<html>
<head>
   <title>Click Event Example</title>
</head>
<body>
   <p> Click the button below to perform an event </p>
   <button id="myButton">Click Me</button>

   <script>
    // 获取按钮元素
    const button = document.getElementById("myButton");
    // 定义事件处理函数
    function handleClick() {
    alert("按钮被点击!");
    }
    // 将事件监听器附加到按钮
    button.addEventListener("click", handleClick);
   </script>

</body>
</html>

示例:鼠标悬停时的颜色变化

本例中，我们有一个 dig 标签，其初始颜色为浅蓝色。鼠标悬停在此 div 标签上时，颜色会变为红色，鼠标移开后又变回蓝色。

本例中有两个事件:mouseover 和 mouseout。mouseover 表示鼠标移动到元素上，mouseout 表示鼠标移出元素。

这里有两个函数，一个用于 mouseover，一个用于 mouseout。当鼠标悬停时，背景颜色属性设置为浅珊瑚色(红色)，当鼠标移开时，背景颜色设置为浅蓝色。

这类鼠标悬停事件在很多网站的导航栏上很常见。

<html>
<head>
   <title>Mouseover Event Example</title>
   <style>
      #myDiv {
         width: 600px;
         height: 200px;
         background-color: lightblue;
      }
   </style>
</head>
<body>
   <div id="myDiv">Hover over me</div>
   <script>
        // 获取 div 元素
        const myDiv = document.getElementById("myDiv");
        
        // 定义事件处理函数
        function handleMouseover() {
        myDiv.style.backgroundColor = "lightcoral";
        }
        
        // 将事件监听器附加到 div
        myDiv.addEventListener("mouseover", handleMouseover);
        
        // 附加示例:鼠标移开后恢复颜色
        function handleMouseout() {
         myDiv.style.backgroundColor = "lightblue";
        }
        
        myDiv.addEventListener("mouseout", handleMouseout);
   </script>
</body>
</html>

同一元素可以有多个事件监听器，例如第二个示例，它有两个事件监听器(分别用于 mouseover 和 mouseout)。可以使用 removeEventListener 函数移除事件监听器。通过在选项中传递 once:true 参数，我们可以确保事件监听器在调用一次后就被移除，这在某些场景(例如支付)中非常重要。

需要注意的是，切勿使用"on"前缀来指定事件，这仅仅意味着对于点击事件，我们应该将其指定为"click"而不是"onclick"。