HTML DOM removeEventListener()用法及代码示例

removeEventListener()方法用于删除与addEventListener()方法关联的事件处理程序。此删除事件处理程序的方法只能与使用外部函数指定的addEventListener()方法一起使用。

用法:

element.removeEventListener(event, function, useCapture);

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

event：参数event指定要删除的事件的名称。
function：参数函数指定要删除的函数。
useCapture：参数useCapture表示要从事件处理程序中删除的事件阶段。如果useCapture的布尔值为true，则将其从捕获阶段中删除事件处理程序，否则将其从冒泡阶段中删除事件处理程序。

例：在下面的示例中，调用事件处理程序，该事件处理程序在鼠标移动到除法上时更改除法标记的颜色。按下更改颜色按钮后，与除法标记关联的事件处理程序将被删除，并且将鼠标移到除法上时不会出现颜色变化。

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        #myDIV { 
            font-size:60px; 
            border:1px solid; 
            padding:50x; 
            color:black; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="myDIV"> 
        GeeksForGeeks 
    <br> 
          
        <button onclick="removeHandler()" id="myBtn"> 
            Change color 
        </button> 
    </div> 
      
    <script> 
        document.getElementById("myDIV") 
            .addEventListener("mousemove", myFunction); 
          
        function myFunction() { 
            document.getElementById("myDIV") 
                        .style.color= "green"; 
        } 
          
        function removeHandler() { 
            document.getElementById("myDIV") 
            .removeEventListener("mousemove", myFunction); 
        } 
    </script> 
</body> 
</html>

输出：
按下按钮之前：

按下按钮后：

支持的浏览器：removeEventListener()方法支持的浏览器如下：

谷歌浏览器1.0
Internet Explorer 9.0
Firefox 1.0
Opera 7.0
Safari 1.0

相关用法

注：本文由纯净天空筛选整理自chaitanyashah707大神的英文原创作品 HTML | DOM removeEventListener() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。