HTML DOM removeEventListener() Method

Example

Remove a "mousemove" event that has been attached with the addEventListener() method:

// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

Try it Yourself »

Definition and Usage

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

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

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

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
removeEventListener()	1.0	9.0	1.0	1.0	7.0

Syntax

element.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.

Technical Details

DOM Version:	DOM Level 2 events
Return Value:	No return value
Changelog:	The useCapture parameter became optional in Firefox 6 and Opera 12.0 (has always been optional for Chrome, IE and Safari)

More Examples

Example

For browsers that do not support the removeEventListener() method, you can use the detachEvent() method.

This example demonstrates a cross-browser solution:

var x = document.getElementById("myDIV");
if (x.removeEventListener) {                   // For all major browsers, except IE 8 and earlier
    x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) {                    // For IE 8 and earlier versions
    x.detachEvent("onmousemove", myFunction);
}

Try it Yourself »

JavaScript Tutorial: HTML DOM EventListener

JavaScript Reference: document.removeEventListener()

< Element Object