HTML - DOM removeEventListener() 方法

HTML DOM 的removeEventListener() 方法用于移除之前添加到元素上的事件监听器。

在JavaScript 中，事件监听器是一个过程或函数，当指定事件发生时（例如“click”、“mouseover”或“mouseout”）执行。

语法

以下是 HTML DOM removeEventListener() 方法的语法：

element.removeEventListener(event, function, capture);

参数

此方法接受三个参数，如下所述：

参数	描述
event	您要移除的事件类型。
function	处理事件的函数。
capture	它是可选的，决定事件监听器的移除。它为捕获阶段设置“true”，为冒泡阶段设置“false”（默认值）。

返回值

此方法不返回值。

示例 1：从按钮中移除事件监听器

以下是 HTML DOM removeEventListener() 方法的基本示例。它演示了如何在单击按钮时从元素中移除事件监听器：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM removeEventListener()</title>
<style>
   button{
      padding: 8px;
   }
</style>
</head>
<body>
<p>Click Remove Listener to remove event handler.</h2>
<br><br>
<button class="myButton">Button 1</button> 
<button id="removeButton">Remove Listeners</button>
<div id="output"></div>
<script>
   const buttons = document.querySelectorAll('.myButton');
   const output = document.getElementById('output');
   const clickHandler = () => {
       output.textContent = 'Button clicked!';
   };
   buttons.forEach(button => button.addEventListener
   ('click', clickHandler));
   document.getElementById('removeButton').addEventListener('click', () =>{
       buttons.forEach(button =>button.removeEventListener
       ('click', clickHandler));
       output.textContent='Event listeners removed!';
   });
</script>
</body>
</html>

示例 2：设置和移除 Div 元素的样式

以下是 HTML DOM removeEventListener() 方法的另一个示例。此代码包含两个按钮。一个按钮用于将事件监听器添加到<div> 元素，另一个按钮用于从该元素中移除事件监听器：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM removeEventListener()</title>
<style>
   .highlighted {
       background-color: yellow;
       padding: 10px;
       border: 1px solid orange;
       margin-top: 10px;
   }
   button{
       padding: 8px;
 }
</style>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>removeEventListener() Method</h2>
<p>This example set and remove the styles by using the event handler..</p>
<button id="hb">Highlight</button>
<button id="rb">Remove Style</button>
<div id="content">This is a div element.</div>
<script>
   const ele = document.getElementById('content');
   const hib = document.getElementById('hb');
   const reb = document.getElementById('rb');
   
   const highlightDiv = () => {
      ele.classList.add('highlighted');
   };
   
   const resetDiv = () => {
      ele.classList.remove('highlighted');
   }; 
   hib.addEventListener('click', highlightDiv);
   reb.addEventListener('click',function resetAndRemove(){
      resetDiv();
      hib.removeEventListener('click', highlightDiv);
      reb.removeEventListener('click', resetAndRemove);
   });
</script>
</body>
</html>

支持的浏览器

方法
removeEventListener()	是	是	是	是	是

html_dom_element_reference.htm

打印页面