HTML DOM removeEventListener() Method
Example
Remove a "mousemove" event that has been attached with the addEventListener() method:
// Attach an event handler to the document
document.addEventListener("mousemove", myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction);
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
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.
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
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:
|
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:
if (document.removeEventListener) { // For all major browsers, except IE 8 and earlier
document.removeEventListener("mousemove", myFunction);
} else if (document.detachEvent) { // For IE 8 and earlier versions
document.detachEvent("onmousemove", myFunction);
}
Try it Yourself »
Related Pages
JavaScript Tutorial: HTML DOM EventListener
JavaScript Reference: element.removeEventListener()
