Could someone help to check why the removeHandler is not working? And how to make it work? Thanks.
<body>
<button onclick="removeHandler()" id="myBtn">remove</button>
<p id="demo">hello</p>
<script>
document.getElementById("demo").addEventListener("click", myFunction("random: "));
function myFunction(t) {
var x = function(){
document.getElementById("demo").innerHTML = t+Math.random();
};
return x;
}
function removeHandler() {
document.getElementById("demo").removeEventListener("click", myFunction("random: "));
}
</script>
</body>
Could someone help to check why the removeHandler is not working? And how to make it work? Thanks.
<body>
<button onclick="removeHandler()" id="myBtn">remove</button>
<p id="demo">hello</p>
<script>
document.getElementById("demo").addEventListener("click", myFunction("random: "));
function myFunction(t) {
var x = function(){
document.getElementById("demo").innerHTML = t+Math.random();
};
return x;
}
function removeHandler() {
document.getElementById("demo").removeEventListener("click", myFunction("random: "));
}
</script>
</body>
- 2 stackoverflow./questions/10444077/… or stackoverflow./questions/16651790/… or stackoverflow./questions/5825493/… – epascarello Commented Apr 26, 2017 at 3:15
4 Answers
Reset to default 4Becasue myFunction returns a new function for each call. Each time you call myFunction, it creates (define) a new function, and return it.
function myFunction() {
return function() {};
}
var f1 = myFunction();
var f2 = myFunction();
console.log(f1 === f2);FIX:
You have to store the return value of myFunction into a variable, and then pass that variable to both addEventListener and removeEventListener:
var f = myFunction("random: ");
document.getElementById("demo").addEventListener("click", f, false);
// ...
document.getElementById("demo").removeEventListener("click", f);
If you are using React functional ponent, just be sure to wrap your function inside useCallback hooks, or the function will not be the same after re-rendering. Below is an example that I put the event listener inside useEffect in order to demonstrate re-rendering.
Also make sure that is you are calling another function inside useCallback function, that function should also be wrapped within useCallback to prevent the function from re-initializing.
If these "other function" has dependent on other state, this might cause removeEventListener not working cause the function is re-initialized, which the reference of that function is not the same.
const test = useCallback(() => {...}, [])
useEffect(() => {
if (isTest) document.addEventListener('mousemove', test, true)
else document.removeEventListener('mousemove', test, true)
}, [isTest])
JavaScript is very particular when it es to removing event listeners. You can only remove the same event listener that you have previously added. It also needs to match whether it’s bubbling.
Among other things, that means that you cannot remove an anonymous event listener since you have no way of identifying it.
In your case, you’re pounding the problem by actually attempting to remove a newly created event listener.
The only way to remove an event listener is to ensure that it has a name. In your case, it would be as follows:
var random=myFunction("random: ");
document.getElementById("demo").addEventListener("click", random,false);
function myFunction(t) {
var x = function(){
document.getElementById("demo").innerHTML = t+Math.random();
};
return x;
}
function removeHandler() {
document.getElementById("demo").removeEventListener("click", random,false);
}
Note:
- There is a variable name (
randomin this case) to identify the event listener function - I have also added
falseas a third parameter to ensure that the remove matches the add.
It seems every time you click on demo function call return new function so that its not behaving as expected.
try running Example
<body>
<p id="demo">Hello</p>
<button onclick="removeHandler()" id="myBtn">Try it</button>
<p><strong>Note:</strong> The addEventListener() and removeEventListener() methods are not supported in Internet Explorer 8 and earlier versions.</p>
<script>
document.getElementById("demo").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("demo").removeEventListener("click", myFunction);
}
</script>