Does removing an element also remove its event listeners?

[bgold12]

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.getEle mentById('elemI d');

// attach the event listener
if (elem.addEventL istener) { // std
elem.addEventLi stener(eventNam e, functionRef, false );
} else if (elem.attachEve nt) { // ie
elem.attachEven t(eventName, functionRef );
} // end if

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

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

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

Thanks.

[richard]

try posting to comp.lang.javas cript
On Fri, 21 Nov 2008 05:51:26 -0800 (PST), bgold12 <bg*****@gmail. com>
wrote:

>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.getEle mentById('elemI d');

// attach the event listener
if (elem.addEventL istener) { // std
elem.addEventLi stener(eventNam e, functionRef, false );
} else if (elem.attachEve nt) { // ie
elem.attachEven t(eventName, functionRef );
} // end if

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

// delete the element
elem.parentNod e.removeChild(e lem);

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

Thanks.

[Stor Ursa]

On Nov 21, 8:12*am, richard <mem...@newsguy .comwrote:

try posting to comp.lang.javas cript

On Fri, 21 Nov 2008 05:51:26 -0800 (PST), bgold12 <bgol...@gmail. com>
wrote:

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.getEle mentById('elemI d');

// attach the event listener
if (elem.addEventL istener) { // std
* *elem.addEventL istener(eventNa me, functionRef, false );
} else if (elem.attachEve nt) { // ie
* *elem.attachEve nt(eventName, functionRef );
} // end if

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

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

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

Thanks.

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.

[Ben C]

On 2008-11-21, Stor Ursa <st******@gmail .comwrote:

On Nov 21, 8:12*am, richard <mem...@newsguy .comwrote:

>try posting to comp.lang.javas cript

On Fri, 21 Nov 2008 05:51:26 -0800 (PST), bgold12 <bgol...@gmail. com>
wrote:

>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.getEle mentById('elemI d');

>// attach the event listener
if (elem.addEventL istener) { // std
* *elem.addEventL istener(eventNa me, functionRef, false );
} else if (elem.attachEve nt) { // ie
* *elem.attachEve nt(eventName, functionRef );
} // end if

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

>// delete the element
elem.parentNod e.removeChild(e lem);

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

>Thanks.

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.

I'm fairly sure it should be. What I would expect to happen is for the
event listener to be garbage collected some time after all references to
the removed element have gone.

So if you write:

var oldChild = elem.parentNode .removeChild(el em);

nothing will be actually deleted until oldChild goes out of scope, by
which time of course it will be impossible to reattach the element.

[Stevo]

bgold12 wrote:

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.getEle mentById('elemI d');

// attach the event listener
if (elem.addEventL istener) { // std
elem.addEventLi stener(eventNam e, functionRef, false );
} else if (elem.attachEve nt) { // ie
elem.attachEven t(eventName, functionRef );
} // end if

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

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

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]

bgold12 wrote:

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.getEle mentById('elemI d');

// attach the event listener
if (elem.addEventL istener) { // std
elem.addEventLi stener(eventNam e, functionRef, false );
} else if (elem.attachEve nt) { // ie
elem.attachEven t(eventName, functionRef );
} // end if

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

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

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]

Webkit will kept it.
--------CODE-----------
<html>
<head>
<title>Handle r Test</title>
<script type="text/javascript">
function addListener(nod e, event, funktion) {
if(node) {
if(document.add EventListener) {
node.addEventLi stener(event, function(e){fun ktion(e);}, false);
} else if(document.att achEvent) {
node.attachEven t("on"+event, function(){funk tion();});
}
}
}

//global vars
var tButton = null;
function removeButton_Cl ick(e) {
var t = document.getEle mentById("testB utton");
tButton = t.parentNode.re moveChild(t);
document.getEle mentById("addBu tton").style.di splay = "inline";
document.getEle mentById("remov eButton").style .display = "none";
}

function addButton_Click (e) {
document.body.a ppendChild(tBut ton);
document.getEle mentById("addBu tton").style.di splay = "none";
document.getEle mentById("remov eButton").style .display = "inline";
}

function testButton_Clic k(e) {
alert("You clicked the testButton.")
}
addListener(win dow, "load", function(){
addListener(doc ument.getElemen tById("testButt on"), 'click',
testButton_Clic k);
addListener(doc ument.getElemen tById("addButto n"), 'click',
addButton_Click );
addListener(doc ument.getElemen tById("removeBu tton"), 'click',
removeButton_Cl ick);
});

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