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

如果创建了一个事件并且用户有一些活动，但您不希望元素出于某种目的对该特定事件做出反应，那么我们在 JavaScript 中有 removeEventListener() 方法。 removeEventListener() 是一个JavaScript 中的内置函数从元素中删除附加事件的事件处理程序。例如，如果单击后禁用按钮，则可以使用 removeEventListener() 删除单击事件侦听器。
句法：

element.removeEventListener(event, listener, useCapture)

参数：它接受下面指定的三个参数-

• event：它是一个字符串，描述了必须删除的事件的名称。
• listener：是要移除的事件处理函数。
• useCapture：它是一个可选参数。默认情况下，它是布尔值 false，它指定从冒泡阶段删除事件处理程序，如果它是 true，则 removeEventListener() 方法从捕获阶段删除事件处理程序。

显示 removeEventListener() 方法工作的 JavaScript 代码：
代码#1：

  

    Click this button to stop hovering effect !!
    Click here
  
    Hover over this Text !
  
    
  
    
        const y = document.getElementById("hoverPara");
  
        y.addEventListener("mouseover", RespondMouseOver);
  
        function RespondMouseOver() {
            document.getElementById("effect").innerHTML +=
                "mouseover Event !!" + "<br>";
        }
  
        function RespondClick() {
            y.removeEventListener("mouseover", RespondMouseOver);
            document.getElementById("effect").innerHTML +=
                'You clicked the "click here" button' + "<br>" + 
                "Now mouseover event doesn't work !!";
        }
    

  
                              

输出：
在将鼠标悬停在文本上之前-

在文本上悬停 2 次后-

点击“点击这里”按钮后——

注意：如果需要找出触发的事件，可以使用type事件属性。此属性可用于通过查找触发事件的类型来删除特定事件。

代码#2： event.type 属性可用于显示触发事件的类型。下面的 JavaScript 代码显示了 event.type 属性和 removeEventListener() 方法的工作。

  

    Click here
    
  
    
  
    
        const x = document.getElementById("clickIt");
  
        x.addEventListener("click", Respond);
  
        function Respond(e) {
            document.getElementById("effect").innerHTML +=
            "Type of event triggered = " + e.type + "<br><br>";
            document.getElementById("effect").innerHTML += 
            "Now click Event is disabled !! " + "<br><br>";
            x.innerText = "Click is disable !";
  
            // The click event is only one time triggered
            // by clicking the "click here" button.
            x.removeEventListener("click", Respond);
        }
    

  

输出：
在点击“点击这里”按钮之前——

点击“点击这里”按钮后——

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。