HTML DOM removeEventListener() Method
Example
Remove the "mousemove" event added by the addEventListener() method:
// Add event handler to <div> element
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
// Remove event handler from <div> element
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
Definition and Usage
The removeEventListener() method removes event handlers that have been attached with the addEventListener() method.
Note: To remove event handlers, the function specified with the addEventListener() must be an external function, as shown in the example above (myFunction).
Anonymous functions, like document.removeEventListener("event", function(){ myScript }); cannot be removed.
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
removeEventListener() |
1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Note: removeEventListener() method is not supported by Internet Explorer 8 and earlier versions, and Opera 7.0 and earlier. For these unsupported browsers, you can use the detachEvent() method to remove event handlers added with attachEvent() (see "More Examples" for a cross-browser solution).
Syntax
Parameter Values
| Parameter | Description |
|---|---|
| event | Required. The name of the event to remove. <br> <br> Note: Do not use the "on" prefix. For example, use "click" instead of "onclick". <br> <br> Tip: For a complete list of all HTML DOM events, see our HTML DOM Event Object Reference |
| function | Required. Specifies the function to remove. |
| useCapture | Optional. A Boolean value that specifies the phase in which the event handler should be removed. <br> <br> Possible values: true - Removes the event handler during the capture phase. <br> false - Default. Removes the event handler during the bubbling phase. <br> Note: If an event handler is added twice, once for the capture phase and once for the bubbling phase, you must remove them separately. |
Technical Details
| DOM Version: | DOM Level 2 events |
|---|---|
| Return Value: | No return value |
| --- | --- |
| Modification Record: | In Firefox 6 and Opera 12.0, the useCapture parameter is optional. (It has always been optional in Chrome, IE, and Safari). |
| --- | --- |
More Examples
Example
If the browser does not support the removeEventListener() method, you can use the detachEvent() method instead.
This example demonstrates a cross-browser solution:
var x = document.getElementById("myDIV");
if (x.removeEventListener) { // All browsers, except IE 8 and earlier
x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) { // IE 8 and earlier
x.detachEvent("onmousemove", myFunction);
}
Related Pages
JavaScript Tutorial: HTML DOM EventListener
JavaScript Reference: document.removeEventListener()