如何使用 JavaScript 方法移除事件处理程序

2025 年 3 月 18 日 | 6 分钟阅读

对象的状态变化被称为 JavaScript 中的事件。当浏览器执行特定操作时，HTML 会包含显示功能的各种事件。当 JavaScript 集成到 HTML 中并允许运行时，JavaScript 会对事件的发生做出响应。

可以使用内置的 JavaScript 函数 removeEventListener() 从元素中移除已连接事件的事件监听器。例如，如果一个按钮在被点击一次后被禁用，您可以使用 removeEventListener() 来移除点击事件监听器。

在您已生成事件并发生用户交互，但希望在特定情况下阻止该事件响应用户时，可以使用 removeEventListenert() 方法。

语法

以下语法使用 JavaScript removeEventListenert() 方法来移除事件监听器。

或

参数：该方法需要两个默认参数和一个可选参数。参数及其说明如下。

Event：此字符串标识必须移除的事件类型或事件名称。
Handler：要移除的事件监听器的功能。
UseCapture：这是一个可选参数。
- 默认情况下，它具有布尔值 false，表示事件监听器应从冒泡阶段移除。
- 如果 useCapture 的值为 true，则应使用 removeEventListener() 方法从捕获阶段移除事件监听器。

示例

以下示例展示了使用不同事件和监听器操作 remove event listener。

示例 1：移除按钮的点击事件

基本示例展示了带有事件的 JavaScript removeEventListenert() 方法。第一次点击按钮后会弹出 alert 框。之后，使用该方法移除事件功能，并禁用该事件及其监听器。第二次及之后的按钮点击时，alert 框将不再弹出。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type = "text/css">
#data {
background-color: orange;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<button id = "data_btn"> Click Here </button>
<script>
const btn_value = document.querySelector('#data_btn');
function button_func(event) {
alert("Done, Remove event after Function activate!");
//Remove the event listener, and after that alert tab does not pop up.
btn_value.removeEventListener("click", button_func);
}
//Activate the function once to remove the event
btn_value.addEventListener("click", button_func);
</script>
</body>
</html>

输出

输出显示了添加和移除点击事件的按钮功能。

移除事件监听器前的输出

How to Remove an Event Handler Using JavaScript Method

移除事件监听器后的输出

示例 2：移除 mousemove 事件

该示例显示了橙色背景的 div 标签的值。鼠标移动事件在网页上默认是激活的。点击该功能后，鼠标移动事件将不再工作，并显示页面的最后一个值。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: orange;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information"> </p>
<p id = "information1">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mousemove", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mousemove event 
// mousemove event is disabled
btn_value.removeEventListener("mousemove", button_func);
document.getElementById("information1").innerHTML = "removes event handler functionality from capturing on the web page";
}
</script>
</body>
</html>

输出

输出显示了添加和移除鼠标移动事件的按钮功能。图片显示了移除事件监听器后的输出。

示例 3：移除 mouseover 事件

在此示例中，我们为元素添加了 mouseover 事件。当用户开始将鼠标悬停在该元素上时，希望事件结束。为了移除鼠标悬停事件，我们在按钮元素上创建了 removeEventListener()。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: lightgreen;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method with mouseover event </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the mouse over functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mouseover", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mouseover event 
// mousemove event is disabled
btn_value.removeEventListener("mouseover", button_func);
document.getElementById("information").innerHTML = "removes event handler functionality on the web page";
}
</script>
</body>
</html>

输出

输出显示了添加和移除鼠标悬停事件的按钮功能。

示例 4：使用 true useCapture 移除 mouseover 事件

在此示例中，我们使用一个元素、一个 mouseover 事件，以及 useCapture 参数。当用户开始将鼠标悬停在该元素上时，希望事件结束。如果 useCapture 设置为“true”，则暂时移除事件，然后该函数会重新开始。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: yellow;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mouseover", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mouseover event 
// mousemove event is disabled
btn_value.removeEventListener("mouseover", button_func, true);
document.getElementById("information").innerHTML = "removes event handler functionality from bubbling on the web page";
}
</script>
</body>
</html>

输出

输出显示了添加和移除鼠标悬停事件的按钮功能。

移除事件监听器前的输出

移除事件监听器后的输出

示例 5：使用 false useCapture 移除 mouse move 事件

在此示例中，我们使用一个元素、一个 mouseover 事件，以及 useCapture 参数。当用户开始将鼠标悬停在该元素上时，希望事件结束。如果 useCapture 设置为“false”，则暂时移除事件，然后该函数会重新开始。默认参数设置为 false，但您可以看到其工作功能。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> The JavaScript removeEventListener() Method </title>
<style type="text/css">
#data {
background-color: orange;
border: solid 1px black;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<h2> The JavaScript removeEventListener() Method </h2>
<p id = "data">
This is a Javascript removeEventListener() method that removes the functionality of the add event listener!
</p>
<p id = "data_btn">
<input type = "button" onclick = "removeTypeHandler()" value = "Click Here" />
</p>
<p id = "information">
</p>
<script>
const btn_value = document.querySelector('#data');
//activate mouse move event or function
btn_value.addEventListener("mousemove", button_func);
//Use the mouse move function to add an event listener
function button_func() {
document.getElementById("information").innerHTML = Math.random();
}
//operate button click function to stop the event
function removeTypeHandler() {
//Remove the event listener function of the mousemove event 
// mousemove event is disabled
btn_value.removeEventListener("mousemove", button_func, false);
document.getElementById("information").innerHTML = "removes event handler functionality from capturing on the web page";
}
</script>
</body>
</html>

输出

输出显示了添加和移除鼠标移动事件的按钮功能。

移除事件监听器前的输出

移除事件监听器后的输出

支持的 Web 浏览器

JavaScript 的 removeEventListenert() 方法支持的浏览器列表如下：

Google Chrome 1.0
Firefox 1.0
Edge 9.0
Safari 1.0
Opera 7.0

结论

如果您创建了一个事件并且某些事件持续工作，则使用 removeEventListenert() 方法可以停止其功能。

下一主题JavaScript translate() 方法

如何使用 JavaScript 方法移除事件处理程序

语法

示例

支持的 Web 浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何使用 JavaScript 方法移除事件处理程序

语法

示例

支持的 Web 浏览器

结论

相关帖子

JavaScript 调用栈

JavaScript 多行字符串

如何在 JavaScript 中获取父元素

在 JavaScript 中从字符串中移除所有空格

JavaScript 中的 Window Location

如何在 JavaScript 中移除对象的键/属性

JAVASCRIPT TRIGGER CLICK

如何使用 JavaScript 点击链接

Mouseout 事件在 javascript 中的用法

npm Install 命令

订阅 Tpoint Tech

联系信息

关注我们