HTML DOM removeEventListener()
Method
Example
Remove the "mousemove" event added by the addEventListener()
method:
// Add event handler to the document
document.addEventListener("mousemove", myFunction);
// Remove event handler from the document
document.removeEventListener("mousemove", myFunction);
Definition and Usage
The document.removeEventListener()
method is used to remove an event handler that has been attached with the document.addEventListener()
method.
Note: To remove an event handler, the addEventListener()
must have been called with an external function, as shown in the example above (myFunction).
Anonymous functions, like document.removeEventListener("event", function(){ myScript });
, cannot be removed.
Tip: Use the element.addEventListener()
and element.removeEventListener()
methods to add or remove event handlers for a specified element.
Browser Support
The numbers in the table specify the first browser version that supports the method.
Method | Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
removeEventListener() |
1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Note: Internet Explorer 8 and earlier versions do not support the removeEventListener()
method, and Opera 7.0 and earlier versions do not support it either. However, for browsers that do not support this function, you can use the detachEvent()
method to remove an event handler 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. <br> For example, use "click" instead of "onclick". <br> <br> Tip: For a list of all HTML DOM events, see our complete HTML DOM Event Object Reference |
function | Required. The function to remove. |
useCapture | Optional. A Boolean value that specifies the phase of the event handler to be removed. <br> <br> Possible values: <br> true - The event handler is removed during the capture phase. <br> false - Default. The event handler is removed 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 it separately. |
Technical Details
DOM Version: | DOM Level 2 events |
---|---|
Return Value: | No return value |
Modification History: | The useCapture parameter is optional in Firefox 6 and Opera 12.0 (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.
This example shows a cross-browser solution:
if (document.removeEventListener) { // All browsers, except IE 8 and earlier
document.removeEventListener("mousemove", myFunction);
} else if (document.detachEvent) { // IE 8 and earlier
document.detachEvent("onmousemove", myFunction);
}
Related Articles
JavaScript Tutorial: HTML DOM EventListener
JavaScript Reference: element.removeEventListener()