Does removing an element also remove its event listeners?

bgold12 · Nov 21, 2008

Hey, I just want to make sure that when I remove an element I don't
have to worry about the events listeners I added previously to the
element. For example:

// get the element by its id
elem = document.getElementById('elemId');

// attach the event listener
if (elem.addEventListener) { // std
elem.addEventListener(eventName, functionRef, false );
} else if (elem.attachEvent) { // ie
elem.attachEvent(eventName, functionRef );
} // end if

.... // whatever functionality makes use of the element and its event
(s)

// delete the element
elem.parentNode.removeChild(elem);

In this case, does the browser automatically destroy the events I
added previously, or do have to remove them myself?

Thanks.

richard · Nov 21, 2008

try posting to comp.lang.javascript

Stor Ursa · Nov 21, 2008

try posting to comp.lang.javascript

That's an interesting question. You could add the Element back to the
DOM after removing it and then see if it's still there when you click
on it.

Stevo · Nov 21, 2008

bgold12 said:
Hey, I just want to make sure that when I remove an element I don't
have to worry about the events listeners I added previously to the
element. For example:

// get the element by its id
elem = document.getElementById('elemId');

// attach the event listener
if (elem.addEventListener) { // std
elem.addEventListener(eventName, functionRef, false );
} else if (elem.attachEvent) { // ie
elem.attachEvent(eventName, functionRef );
} // end if

... // whatever functionality makes use of the element and its event
(s)

// delete the element
elem.parentNode.removeChild(elem);

In this case, does the browser automatically destroy the events I
added previously, or do have to remove them myself?

I'd trust a reply from someone like Thomas pointyears more than mine on
this, but it seems to me like you've got nothing to worry about here.

You haven't "added events", all you did was add a handler to be called
if that element generates those events. Now that the element is removed,
it can't generate any events. It is an interesting idea though to add
the element back in and see if your handler is still hooked in, although
I doubt this is something you planned to do.

Daniel Orner · Nov 21, 2008

bgold12 said:
Hey, I just want to make sure that when I remove an element I don't
have to worry about the events listeners I added previously to the
element. For example:

// get the element by its id
elem = document.getElementById('elemId');

// attach the event listener
if (elem.addEventListener) { // std
elem.addEventListener(eventName, functionRef, false );
} else if (elem.attachEvent) { // ie
elem.attachEvent(eventName, functionRef );
} // end if

... // whatever functionality makes use of the element and its event
(s)

// delete the element
elem.parentNode.removeChild(elem);

In this case, does the browser automatically destroy the events I
added previously, or do have to remove them myself?

Thanks.

It depends on your browser. IE6 in particular is known for being awful
with garbage collecting. The problem is that there is an implicit
circular closure between the event handler (which is a JavaScript
object) and the DOM tag itself (which is a DOM object and hence subject
to entirely different garbage collection routines). So the answer, if
you're worried about memory in IE6 (and possibly IE7, not sure) is no.
There has been a patch released which purportedly fixes this problem,
but I haven't had a chance to test it myself.

Stor Ursa · Nov 21, 2008

Webkit will kept it.
--------CODE-----------
<html>
<head>
<title>Handler Test</title>
<script type="text/javascript">
function addListener(node, event, funktion) {
if(node) {
if(document.addEventListener) {
node.addEventListener(event, function(e){funktion(e);}, false);
} else if(document.attachEvent) {
node.attachEvent("on"+event, function(){funktion();});
}
}
}

//global vars
var tButton = null;
function removeButton_Click(e) {
var t = document.getElementById("testButton");
tButton = t.parentNode.removeChild(t);
document.getElementById("addButton").style.display = "inline";
document.getElementById("removeButton").style.display = "none";
}

function addButton_Click(e) {
document.body.appendChild(tButton);
document.getElementById("addButton").style.display = "none";
document.getElementById("removeButton").style.display = "inline";
}

function testButton_Click(e) {
alert("You clicked the testButton.")
}

addListener(window, "load", function(){
addListener(document.getElementById("testButton"), 'click',
testButton_Click);
addListener(document.getElementById("addButton"), 'click',
addButton_Click);
addListener(document.getElementById("removeButton"), 'click',
removeButton_Click);
});

</script>
</head>
<body>
<button id="removeButton">Remove Button</button> <button
id="addButton" style="display:none">Add Button</button> <br />
<button id="testButton">Test Button</button>
</body>
</html>
-----------------------

How do I push into an array using an event listener?	5	Dec 22, 2022
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
cloneNode and iterating event listeners	2	Apr 24, 2006
Event Listeners and innerHTML	0	May 25, 2006
How to remove an element?	3	Jun 19, 2010
Help with Python Flask on PI as server SSE to website	0	Apr 23, 2022
JNI and event listeners in native code?	1	Oct 28, 2008
Listeners and MVC	3	Nov 10, 2006

Does removing an element also remove its event listeners?

bgold12

richard

Stor Ursa

Stevo

Daniel Orner

Stor Ursa

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads