JavaScript |带有示例的 removeEventListener() 方法(1)

📌 相关文章

📜 JavaScript |带有示例的 removeEventListener() 方法(1)

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

JavaScript | 带有示例的 removeEventListener() 方法

在JavaScript中，事件处理程序是通过 EventListener来实现的。通过addEventListener()方法，我们可以为一个元素添加一个或多个事件处理程序。但是，当您需要删除该处理程序时，您可以使用 removeEventListener() 方法。本文将介绍 removeEventListener() 方法的用法和示例代码。

removeEventListener()方法的语法

element.removeEventListener(event, function, useCapture);

参数说明：

event: 必需，表示监听的事件的名称。
function: 必需，表示要移除的事件处理程序的名称。
useCapture: 可选，布尔值，表示事件是否在捕获阶段处理，若未设置，则默认为 false（在事件冒泡阶段处理）。

removeEventListener()方法的介绍

通过removeEventListener方法，可以移除使用addEventListener方法添加的事件。
要移除事件处理程序，必须使用与添加处理程序相同的参数。这意味着您必须在移除事件处理程序时使用相同的事件类型，事件处理程序函数。

removeEventListener()方法的示例

下面是删除事件处理程序的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>removeEventListener() Method Example</title>
</head>
<body>
    <button id="btn">Click me!</button>
    <script>
        function onClick(){
            alert("Button clicked!");
        }
        var btn= document.getElementById("btn");
        btn.addEventListener("click", onClick);

        // 移除事件处理程序
        btn.removeEventListener("click", onClick);
    </script>
</body>
</html>

在上面的示例中，我们首先为一个按钮元素添加了一个名为 onClick 的事件处理程序。接下来，我们使用 removeEventListener() 方法，将该事件处理程序从按钮元素中删除。