Javascript remove all event listeners
Definition and application The JavaScript method removeEventListener() of the EventTarget object allows you to remove an event handler of a specific type for a specific target that was set using the addEventListener() method. The event handler to be removed is identified through a combination of the event type, the specified event listener function, and various…
Definition and application
The JavaScript method removeEventListener() of the EventTarget object allows you to remove an event handler of a specific type for a specific target that was set using the addEventListener() method.
The event handler to be removed is identified through a combination of the event type, the specified event listener function, and various additional parameters that may affect the mapping process.
Note that calling the removeEventListener() method with arguments that do not identify any currently registered event handler will have no effect.
Support for browsers
JavaScript syntax:
target.removeEventListener(type, listener);
target.removeEventListener(type, listener, options);
target.removeEventListener(type, listener, useCapture);
type - String
listener - Function
options - Object
useCapture - BooleanSpecification
Document Object Model (DOM) Level 2 Events
Parameter values
Usage example
Basic use of the method
<!DOCTYPE html>
<html>
<head>
<title>Использование JavaScript метода removeEventListener()</title>
</head>
<body>
<button onclick = "addFunc()">Add</button>
<button onclick = "removeFunc()">Remove</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const listElements = document .querySelectorAll(" li "); // select all li elements in document
const addFunc = function () {
for ( let i = 0; i < listElements .length; i ++ ) { // loop through all list elements
listElements [ i ].addEventListener(" click ", setColor ); // set for each element the event handler for pressing the left mouse button on the element
}
} ; const setColor = (
e ) => e .target.style.color=" green "; // set the text color to green on the object that fired the event
const removeFunc = function () {
for ( let i = 0; i < listElements .length; i ++ ) { // loop through all the elements of the list
listElements [ i ].style .color = " #000 "; // set the text color to black for the current element
listElements [ i ].removeEventListener(" click ",setcolor ); // remove the event handler for pressing the left mouse button on the element for each element of the list
}
} ;
</script>
</body>
</html>In this example, we have placed a bulleted list ( <ul> ) within which we have placed five list items ( <li> ). With the querySelectorAll() method, we have selected all the <li> elements in the document, and initialized the variable with this value.
In addition, we placed two buttons in the document (a <button> element), which were assigned functions that fire when clicked using the onclick event attribute. When the first button is clicked, a function is triggered that loops through all the elements of the list and, using the addEventListener() method, sets the ” click ” event handler function for each <li> element (clicking the left mouse button on the element). This function changes the text color of the element to green when the element is clicked.
When the second button is clicked, a function is triggered that loops through all the elements of the list, sets the text color of each element to black , and using the removeEventListener() method, removes the ” click ” event handler function from each <li> element (clicking the left mouse button on element). As a result, when you click on any <li> element, the color of the element’s text will not change until the first button is pressed again, which sets a handler for this event.
The result of our example:
Deleting events with additional parameters
As you may have noticed from the previous example, to remove an event using the removeEventListener() method , you need to specify the same type and handler function, but what about the options or useCapture parameters ?
The addEventListener() method allows you to add the same event handler more than once for the same event type, in case the parameters differ. The removeEventListener() method only checks the value of the capture key in the options object (other possible keys are ignored by the method), or the boolean value in the useCapture parameter .
Let’s look at an example where we set up an event handler for the same event type for both the capture phase and the bubbling phase using the useCapture parameter :
<!DOCTYPE html>
<html>
<head>
<title>Использование JavaScript метода removeEventListener() (с дополнительным параметром)</title>
</head>
<body>
<button onclick = "addFunc()">Add</button>
<button onclick = "removeFunc()">Remove (bubbling phase)</button>
<button onclick = "removeFunc2()">Remove (capture phase)</button>
<p>Click me</p>
<script>
const p = document.querySelector (" p "); // select the first p element in the document
const addFunc = function () {
p .addEventListener(" click ", myFunc , false ); // set the element's left mouse click event handler on the element (bubbling stage)
p .addEventListener(" click ", myFunc , true ); // set for the element the event handler of the left mouse button click on the element (interception stage)
} ; const
myFunc = function () {
console .log(" click "); // output text information to the console
} ;
add Func(); // call the function when the document is loaded
const removeFunc = function () {
p .removeEventListener(" click ", myFunc ); // remove the event handler for the element when the left mouse button is pressed on the element (the bubbling stage). It is not necessary to explicitly specify false.
} ; const removeFunc2 = function () { p .removeEventListener("
click ", myFunc , true ); // remove the event handler for the element when the left mouse button is pressed on the element (trap stage)
} ;
</script>
</body>
</html>In this example, we placed a <p> element ), using the querySelector() method, we selected it and initialized the variable with this value. We placed three buttons in the document (a <button> element ), to which, using the onclick event attribute, we assigned functions that fire when clicked.
When the first button is clicked, a function is triggered that, using the addEventListener() method, sets the function for the <p> element to handle the event ” click ” (clicking the left mouse button on the element) for both the bubbling phase and the interception phase ( capture phase ). Note that we are calling the addFunc() function when the document is loaded.
When the second button is clicked, a function is triggered that, using the removeEventListener() method, removes the ” click ” event handler function from the <p> element (clicking the left mouse button on the element). Pay attention to an important point, in this case we remove only the function that is intended for the bubbling stage. The handler function intended for the interception stage after deletion will still work.
When the third button is clicked, a function is triggered that, using the removeEventListener() method, removes the ” click ” event handler function from the <p> element (left-clicking on the element) intended for the interception stage.
The result of our example:
