极客笔记JavaScript 如何移除事件处理程序
在javascript中，对象的状态改变被称为事件。当浏览器执行特定操作时，HTML中包含了多个显示函数的事件。当在HTML中包含了JavaScript并允许其运行时，JavaScript会对事件发生作出反应。
使用内置的JavaScript函数removeEventListener()可以从一个元素中移除与事件相关联的事件处理程序。例如，如果一个按钮在被点击一次后被禁用，您可以使用removeEventListener()来移除点击事件监听器。
removeEventListenert()方法可用于在您生成了一个事件并且用户与之产生了交互之后，但您希望在特定情况下取消事件对用户的响应时使用。
语法
以下语法使用JavaScript removeEventListenert()方法移除事件处理程序。
element.removeEventListener(event, handler);
或
element.removeEventListener(event, handler, useCapture);
参数： 该方法需要两个默认参数和一个可选参数。参数及其规范如下所示：
- 事件（Event）：该字符串标识必须消除的事件或事件名称的类型。
- 处理程序（Handler）：事件处理程序的工作是消除事件。
- UseCapture（使用捕获）：它是一个可选参数。
- 默认情况下，它具有布尔值false，表示事件处理程序应从冒泡阶段中移除。
- 如果useCapture值设置为true，然而，应使用removeEventListener()方法从捕获阶段中移除事件处理程序。
示例
以下示例展示了使用不同事件和处理程序的removeEventListener()方法的操作。
示例1：移除按钮的点击事件
这个基本示例显示了使用javascript的removeEventListener()方法和事件。第一次点击按钮时弹出警告框。然后，使用该方法移除事件功能并禁用该事件及其处理程序。第二次及以后点击按钮时不会弹出警告框。
<!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>
输出：
输出显示了按钮功能的添加和移除点击事件。
在移除事件处理程序之前的输出
删除事件处理程序后的输出
示例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：移除鼠标悬停事件
在这个示例中，我们为一个元素添加了鼠标悬停事件。当用户开始悬停在该元素上时，他们希望该事件结束。为了移除鼠标悬停事件，我们在按钮元素上创建了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 事件
在这个示例中，我们使用一个元素、一个带有 useCapture 参数的 mouseover 事件。当用户开始悬停在该元素上时，他们希望事件结束。如果 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删除鼠标移动事件
在这个示例中，我们使用一个元素、一个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>
输出
输出显示了添加和移除鼠标移动事件的按钮功能。
在移除事件处理程序之前的输出
移除事件处理程序后输出
支持的网络浏览器
javascript中removeEventListenert()方法支持的浏览器列表如下：
- 谷歌浏览器1.0
- 火狐浏览器1.0
- Edge浏览器9.0
- 苹果浏览器1.0
- Opera浏览器7.0
结论
如果你创建了一个事件并且该事件一直在工作，那么可以使用removeEventListenert()方法停止功能。