How To Use HTML DOM RemoveEventListener Method In JavaScript

Posted By Bajarangi soft , Posted On 27-09-2020

In Java script we can remove a "mousemove" event that has been attached with the addEventListener() method . addEventListener() method used to create mousemove events so today we are going to discuss how can we remove event listener in java script

How To Use HTML DOM RemoveEventListener Method In JavaScript

The document.removeEventListener() method removes an event handler that has been attached with the document.addEventListener() method.

Note: To remove event handlers, the function specified with the addEventListener() method must be an external, "named" function, like in the example above (myFunction).

Anonymous functions, like "document.removeEventListener("event", function(){ myScript });" will not work.

Tip: Use the element.addEventListener() and element.removeEventListener() methods to add/remove event handlers to/from a specified element.

To know more about addEventListener() method visit our Bajarangisoft site.

Syntax and Usage

document.removeEventListener(event, function, useCapture)

Parameter Values

Parameter       Description
event           Required. A String that specifies the name of the event to remove.
                Note: Do not use the "on" prefix. For example, use "click" instead of "onclick".
                Tip: For a list of all HTML DOM events, look at our complete HTML DOM Event Object Reference.
function        Required. Specifies the function to remove.
useCapture      Optional. A Boolean value that specifies the event phase to remove the event handler from.

                 Possible values:
                 true - Removes the event handler from the capturing phase
                 false- Default. Removes the event handler from the bubbling phase
                 Note: If the event handler was attached two times, one with capturing and one bubbling, each must be removed separately.

Example(1)
This document has an onmousemove event handler that displays a random number every time you move your mouse in this document.

<h2 id="demo"></h2>
<button class="btn btn-primary" onclick="removeHandler()">Stop it</button><br><br>

<script>
    document.addEventListener("mousemove", addhandler);

    function addhandler() {
        document.getElementById("demo").innerHTML = Math.random();
    }

    function removeHandler() {
        document.removeEventListener("mousemove", addhandler);
    }
</script>

In above example when i click button it will remove the event handler.

Example(2)
The removeEventListener() method is not supported Internet Explorer 8 and earlier versions.</p>
<p>This example demonstrates a solution that will work for all browsers.</p>
<p>This document has an onmousemove event handler attached with the addEventListener() method, that displays a random number every time you move your mouse in this document.

<button onclick="removeHandler()" id="Btn">Stop it</button>

<h2 id="demo"></h2>

<script>
    if (document.addEventListener) {
        document.addEventListener("mousemove", myFunction);
    } else if (document.attachEvent) {
        document.attachEvent("onmousemove", myFunction);
    }

    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }

    function removeHandler() {
        if (document.removeEventListener) {
            document.removeEventListener("mousemove", myFunction);
        } else if (document.detachEvent) {
            document.detachEvent("onmousemove", myFunction);
        }
    }
</script>

In above example when i click button it will remove the event handler.

Complete code for HTML DOM RemoveEventListener Method In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM RemoveEventListener Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }

</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>HTML DOM RemoveEventListener Method In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <h2 id="demo"></h2>
        <button class="btn btn-primary" onclick="removeHandler()">Stop it</button><br><br>
    </div>
    <br>
</div>
</body>
</html>
<script>
    document.addEventListener("mousemove", addhandler);

    function addhandler() {
        document.getElementById("demo").innerHTML = Math.random();
    }

    function removeHandler() {
        document.removeEventListener("mousemove", addhandler);
    }
</script>

Related Post