HTML DOM removeEventListener() Method
Element ObjectExample
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 |
Note: The removeEventListener() method is not supported in Internet Explorer 8 and earlier versions, and Opera 6.0 and earlier versions. However, for these specific browser versions, you can use the detachEvent() method to remove event handlers that have been attached with the attachEvent() method (see "More Examples" below for a cross-browser solution).
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:
|
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 »
Related Pages
JavaScript Tutorial: HTML DOM EventListener
JavaScript Reference: document.removeEventListener()
