In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > removeEventListener

removeEventListener method

Browser support:

9

Removes the specified event handler from the current element that was registered earlier with the addEventListener method.

Note: The removeEventListener method is supported in Internet Explorer from version 9.

To remove an event listener that was registered with the attachEvent method, use the detachEvent method.

Syntax:

object.removeEventListener (eventName, listener, useCapture);

You can find the related objects in the Supported by objects section below.

Parameters:

eventName

Required. String that specifies the name of the event that the event handler listens for.
For a complete list of events, see the page for Events in JavaScript.
This parameter is case sensitive!

listener

Required. Reference to the event handler function to remove.

useCapture

Required. Boolean that specifies whether the event handler was registered as a capturing listener.

One of the following values:

false

The event handler does not capture the event.

true

The event handler captures the event.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the removeEventListener and detachEvent methods:

<head>
    <script type="text/javascript">
        function OnRedClick () {
            alert ("A click event has occurred on the red button.");
        }

        function AddEventHandler () {
            var redButton = document.getElementById ("redButton");
            if (redButton.addEventListener) {   // all browsers except IE before version 9
                redButton.addEventListener ("click", OnRedClick, false);
            } 
            else {
                if (redButton.attachEvent) {    // IE before version 9
                    redButton.attachEvent ('onclick', OnRedClick);
                }
            }
        }

        function RemoveEventHandler () {
            var redButton = document.getElementById ("redButton");
            if (redButton.removeEventListener) {    // all browsers except IE before version 9
                redButton.removeEventListener ("click", OnRedClick, false);
            }
            else {
                if (redButton.detachEvent) {        // IE before version 9
                    redButton.detachEvent ('onclick', OnRedClick);
                }
            }
        }
    </script>
</head>
<body>
    Click on the red button when the 'click' event has a listener and when it does not.<br />
    <button onclick="AddEventHandler ();">Add a 'click' event listener to the red button</button>
    <button onclick="RemoveEventHandler ();">Remove the event listener</button>
    <br /><br />
    <button id="redButton" style="background-color:red">Red button</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates a cross-browser solution for event capturing:

<head>
    <style>
        #square {
            position:absolute;
            left:200px;
            top:200px;
            width:20px;
            height:20px;
            background:red;
        }
    </style>
    <script type="text/javascript">
        var capturing = false;

        function ToggleCapture () {
            var square = document.getElementById ("square");
            if (capturing) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    capturing = false;
                    window.removeEventListener ("mousemove", MoveSquare, true);
                }
                else {
                    if (square.releaseCapture) {    // IE before version 9
                        square.releaseCapture ();
                    }
                }
            }
            else {
                if (window.addEventListener) {  // all browsers except IE before version 9
                    capturing = true;
                    window.addEventListener ("mousemove", MoveSquare, true);
                }
                else {
                    if (square.setCapture) {    // IE before version 9
                        capturing = true;
                        square.setCapture ();
                    }
                }
            }
        }

        function OnLoseCapture () {
            capturing = false;
        }
        
        function MoveSquare (event) {
            if (capturing) {
                var square = document.getElementById ("square");
                square.style.left = event.clientX + "px";
                square.style.top = event.clientY + "px";
            }
        }
    </script>
</head>
<body onkeydown="ToggleCapture ();"> <br />
    <h3 style="text-align:center">Press any key to toggle capture!</h3>
    While mouse events are captured, the square follows the mouse.
    <div id="square" onmousemove="MoveSquare (event);" onlosecapture="OnLoseCapture ()"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to detect when the user presses a mouse button over an element but releases the button outside the element:

<head>
    <script type="text/javascript">
        var capturedButton = null;
        function OnButtonDown (button) {
            capturedButton = button;
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("mouseup", OnButtonUp, true);
            }
            else {
                if (button.setCapture) {    // IE before version 9
                    button.attachEvent ("onlosecapture", OnButtonLoseCapture);
                    button.setCapture ();
                }
            }
        }
        function OnButtonUp () {
            if (capturedButton) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    window.removeEventListener ("mouseup", OnButtonUp, true);
                }
                else {
                    if (capturedButton.releaseCapture) {    // IE before version 9
                        capturedButton.detachEvent ("onlosecapture", OnButtonLoseCapture);
                        capturedButton.releaseCapture ();
                    }
                }
                capturedButton = null;
            }
            alert ("The button has been released!");

        }

        function OnButtonLoseCapture () {
            alert ("The button loses the mouse capture!");
            OnButtonUp ();
        }

        function Init () {
            var button = document.getElementById ("testButton");
            if (button.addEventListener) {  // all browsers except IE before version 9
                button.addEventListener ("mousedown", function () {OnButtonDown (button)}, false);
            }
            else {
                if (button.attachEvent) {   // IE before version 9
                    button.attachEvent ("onmousedown", function () {OnButtonDown (button)});
                    button.attachEvent ("onmouseup", OnButtonUp);
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    Press the following button and release the mouse button somewhere inside or outside the browser.
    <br />
    <button id="testButton">Capture Test</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example implements a simple spin control:

<head>
    <script type="text/javascript">
        var capturedButton = null;
        var changeTimer = 0;

        function ChangeInput (increase, delay) {
            var myInput = document.getElementById ("myInput");
                // parse the current value
            var value = Number (myInput.value);
            if (isNaN (value)) {
                value = 0;
            }
                // direction
            var dir = increase ? 1 : -1;
                // the new value
            var step = 1;
            value += dir * step;
            if (value < 0) {
                value = 0;
            }
            if (value > 100) {
                value = 100;
            }
            myInput.value = value;

            changeTimer = setTimeout (function () {ChangeInput (increase, 100)}, delay);
        }

        function OnButtonDown (button, increase) {
                // capture mouse up
            capturedButton = button;
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("mouseup", OnButtonUp, true);
            }
            else {
                if (button.setCapture) {    // IE before version 9
                    button.attachEvent ("onlosecapture", OnButtonLoseCapture);
                    button.setCapture ();
                }
            }

                // initialy a longer delay
            ChangeInput (increase, 500);
        }
        
        function OnButtonUp () {
            if (changeTimer) {
                clearTimeout (changeTimer);
                changeTimer = 0;
            }

            if (capturedButton) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    window.removeEventListener ("mouseup", OnButtonUp, true);
                }
                else {
                    if (capturedButton.releaseCapture) {    // IE before version 9
                        capturedButton.detachEvent ("onlosecapture", OnButtonLoseCapture);
                        capturedButton.releaseCapture ();
                    }
                }
                capturedButton = null;
            }
        }

        function OnButtonLoseCapture () {
            OnButtonUp ();
        }

        function Init () {
            var incButton = document.getElementById ("incButton");
            var decButton = document.getElementById ("decButton");
            if (incButton.addEventListener) {   // all browsers except IE before version 9
                incButton.addEventListener ("mousedown", function () {OnButtonDown (incButton, true)}, false);
                decButton.addEventListener ("mousedown", function () {OnButtonDown (decButton, false)}, false);
            }
            else {
                if (incButton.attachEvent) {    // IE before version 9
                    incButton.attachEvent ("onmousedown", function () {OnButtonDown (incButton, true)});
                    decButton.attachEvent ("onmousedown", function () {OnButtonDown (decButton, false)});
                    incButton.attachEvent ("onmouseup", OnButtonUp);
                    decButton.attachEvent ("onmouseup", OnButtonUp);
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    <input id="myInput" size="3" value="50" />
    <button id="incButton">Increase</button>
    <button id="decButton">Decrease</button>
</body>