revision:
The removeEventListener() method of the EventTarget interface removes an event listener previously registered with "EventTarget.addEventListener()" from the target. The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process.
removeEventListener(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)
element.removeEventListener(event, function, capture)
Parameters:
type, event : required. A string which specifies the type of event for which to remove an event listener. The name of the event to remove. Do not use the "on" prefix. Use "click" instead of "onclick".
listener, function : required. The event listener function of the event handler to remove from the event target. The function to remove.
options : optional. An options object that specifies characteristics about the event listener. The available options are:
capture : optional. A boolean value that specifies whether the event listener to be removed is registered as a capturing listener or not. If this parameter is absent, the default value false is assumed.
useCapture : optional. A boolean value that specifies whether the event listener to be removed is registered as a capturing listener or not. If this parameter is absent, the default value false is assumed. "true" - remove the handler from capturing. "false" - remove the handler from bubbling.
element.addEventListener("mousedown", handleMouseDown, true);
element.removeEventListener("mousedown", handleMouseDown, false); // Fails
element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds
element.addEventListener("mousedown", handleMouseDown, { passive: true });
element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Fails
element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, false); // Succeeds
element.removeEventListener("mousedown", handleMouseDown, true); // Fails
The removeEventListener() method removes an event handler from a document.
document.removeEventListener(event, function, capture)
Parameters:
event : required. The name of the event to remove. Do not use the "on" prefix. use "click" instead of "onclick".
function : required. The function to remove.
capture : optional (default = false). "true" - remove the handler from capturing. "false" - remove the handler from bubbling. If the event handler was attached two times, one with capturing and one with bubbling, each must be removed separately.
document.removeEventListener("mousemove", myFunction);
The removeEventListener() method removes an event handler from an element.
element.removeEventListener(event, function, capture)
Parameters:
event : required. The name of the event to remove. Do not use the "on" prefix. use "click" instead of "onclick".
function : required. The function to remove.
useCapture : optional (default = false). "true" - remove the handler from capturing. "false" - remove the handler from bubbling. If the event handler was attached two times, one with capturing and one with bubbling, each must be removed separately.
myDiv.removeEventListener("mousemove", myFunction);
Click "Remove" to remove the event handler.
<div>
<div id="myDIV">This orange element has an onmousemove event handler that displays a random
number when you move the mouse inside.
<p>Click "Remove" to remove the event handler.</p>
<button onclick="removeHandler()">Remove</button>
</div>
<p id="remove-1"></p>
</div>
<style>
#myDIV {background-color: coral;padding: 16px;}
</style>
<script>
const myDiv = document.getElementById("myDIV");
myDiv.addEventListener("mousemove", removeF);
function removeHandler() {
myDiv.removeEventListener("mousemove", removeF);
}
function removeF() {
document.getElementById("remove-1").innerHTML = Math.random();
}
</script>
Click on the above button to print a number
Click on the above button to remove the event listener of the first button
<div>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<p>Click on the above button to print a number</p>
<button class="Btn">Remove event Listener</button>
<p>Click on the above button to remove the event listener of the first button</p>
</div>
<style>
.sample{ font-size: 1vw; font-weight: 400; color:blue;}
</style>
<script>
let sampleEle = document.querySelector('.sample');
let j=0;
function printNum(){
sampleEle.innerHTML += 'Number = ' + j++ + '<br>';
}
document.querySelector('.Btn').addEventListener('click',printNum);
document.querySelectorAll('.Btn')[1].addEventListener('click',()=>{
document.querySelector('.Btn').removeEventListener('click',printNum);
sampleEle.innerHTML = 'Event listener has been removed';
})
</script>
click this button to stop hovering
<div>
<p id="hoverPara">click this button to stop hovering</p>
<button onclick="RespondClick()">click here</button>
<p id="effect"></p>
</div>
<script>
const y = document.getElementById("hoverPara");
y.addEventListener("mouseover", RespondMouseOver);
function RespondMouseOver() {
document.getElementById("effect").innerHTML += "mouseover Event !!" + "<br>"; }
function RespondClick() {
y.removeEventListener("mouseover", RespondMouseOver);
document.getElementById("effect").innerHTML +=
'You clicked the "click here" button' + "<br>" +
"Now mouseover event doesn't work !!";
}
</script>
Click "Remove" to remove the event handler.
<div>
<p>Click "Remove" to remove the event handler.</p>
<button onclick="removeHandlerA()">Remove</button>
<p id="remove-a"></p>
</div>
<script>
document.addEventListener("mousemove", theFunction);
function theFunction() {
document.getElementById("remove-a").innerHTML = Math.random();
}
function removeHandlerA() {
document.removeEventListener("mousemove", theFunction);
}
</script>