Does removing an element also remove its event listeners?

Discussion in 'Javascript' started by bgold12, Nov 21, 2008.

  1. bgold12

    bgold12 Guest

    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.
     
    bgold12, Nov 21, 2008
    #1
    1. Advertising

  2. bgold12

    richard Guest

    try posting to comp.lang.javascript


    On Fri, 21 Nov 2008 05:51:26 -0800 (PST), 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.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
    #2
    1. Advertising

  3. bgold12

    Stor Ursa Guest

    On Nov 21, 8:12 am, richard <> wrote:
    > try posting to comp.lang.javascript
    >
    > On Fri, 21 Nov 2008 05:51:26 -0800 (PST), 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.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.


    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.
     
    Stor Ursa, Nov 21, 2008
    #3
  4. bgold12

    Stevo Guest

    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.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.
     
    Stevo, Nov 21, 2008
    #4
  5. bgold12

    Daniel Orner Guest

    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.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.
     
    Daniel Orner, Nov 21, 2008
    #5
  6. bgold12

    Stor Ursa Guest

    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>
    -----------------------
     
    Stor Ursa, Nov 21, 2008
    #6
  7. bgold12

    dhtml Guest

    Stor Ursa wrote:
    > Webkit will kept it.



    Of all browsers I tried, no browser removed the callback.

    I've reduced the example:-

    ----------------------------------------------------------
    <!doctype html>
    <html>
    <head>
    <title>Handler Test</title>
    </head>
    <body>
    <button id="testButton">Test Button</button>

    <script type="text/javascript">
    function addListener(node, type, f) {
    if(node.addEventListener) {
    node.addEventListener(type, f, false);
    } else if(node.attachEvent) {
    node.attachEvent("on"+type, f);
    }
    }

    function testButton_Click(e) {
    alert("You clicked the testButton.");
    var p = this.parentNode;
    p.removeChild(this);
    alert(this.parentNode);
    p.appendChild(this);
    }

    addListener(document.getElementById("testButton"), 'click',
    testButton_Click);
    </script>
    </body>
    </html>
    ----------------------------------------------------------

    Results in Opera 9, Safari 2.0.4, Safari 3.1.2, Firefox 3.1:

    1) click testButton

    Result:
    elerts "You clicked the testButton."
    button is visibly removed
    elerts "null"
    test button is once again present


    Subsequent clicks to testButton result in the same result.

    Garrett
    --
    comp.lang.javascript FAQ <URL: http://jibbering.com/faq/ >
     
    dhtml, Nov 22, 2008
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bgold12
    Replies:
    5
    Views:
    591
    Stor Ursa
    Nov 21, 2008
  2. thunk
    Replies:
    1
    Views:
    331
    thunk
    Mar 30, 2010
  3. thunk
    Replies:
    0
    Views:
    511
    thunk
    Apr 1, 2010
  4. thunk
    Replies:
    14
    Views:
    645
    thunk
    Apr 3, 2010
  5. Matt Kruse
    Replies:
    2
    Views:
    180
Loading...

Share This Page