CODEWITHSUNDEEP
javascript
kfir124
kfir124

Reputation: 1306

Remove event handler function from window?

If I've added a function to the window object like this: 

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

And lets say my code may run this snippet many times is there a danger in a memory leak? (since I never "delete" that function from the window [SPA])

And just to be on the safe side I prefer to remove that function when my component dies (angularjs2 by the way) how can I "unbind" a function from the window object?

I hope I understand right that each time I call window.onclick = function(...) I add a function and not replacing one

Upvotes: 9

Views: 24073

Answers (4)

ManoDestra
ManoDestra

Reputation: 6503

For a named function, use addEventListener and removeEventListener...

window.addEventListener('click', windowClickHandler, false);
window.removeEventListener('click', windowClickhandler, false);

You can have as many event listeners on an element, using the above method.

For unnamed functions, use...

window.onclick = function(event) { // do stuff; };
window.onclick = null;

You can only have ONE event handler set using the above method. Each window.onclick set using this method overwrites the previous one. Setting it to null simply removes the last one set.

It's up to each browser how it implements its garbage collection with regards to these calls.

Upvotes: 7

BenM
BenM

Reputation: 53246

You cannot remove a specific anonymous event handler from an object when using the onEVENT syntax. Whenever you call object.onclick =, you overwrite whatever is currently assigned to the onclick property of object.

You will need to use addEventListener() and removeEventListener() with a named function:

function windowClicker(event) 
{
    if (event.target == modal) 
    {
        modal.style.display = "none";
    }
}

// Add the listener:
window.addEventListener('click', windowClicker, false);

// Remove it:
window.removeEventListener('click', windowClicker, false);

Upvotes: 13

Barmar
Barmar

Reputation: 782693

If you assign to element.onEVENT, you can remove the binding by assigning null or undefined to the same property. Assigning to properties does not add, it replaces.

If you want to add multiple event handlers, you need to use element.addEventListener. You can then remove handlers with element.removeEventListener. But to use this, you'll have to use a named function, since the remove call needs to provide the same function that was previously added, and you can't do that if you don't assign the function to a name.

Upvotes: 1

Azamantes
Azamantes

Reputation: 1461

If you add event like

window.onclick = function() {
    // some stuff..
}

Then there is only one onclick listener and you can remove it just like

window.onclick = undefined;

But if you want to remove named function then you can do something like this:

function abc(event) {
    // do something
}

window.addEventListener('click', abc); // add the listener

window.removeEventListener('click', abc); // remove the listener

And you can add multiple 'onclick' listeners like this, but you have to keep the reference to them, so anonymous functions are kept forever (till the page is reloaded).

Upvotes: 3

Related Questions