Monthly Archives: March 2013

Zombie Events, How To Kill Them And How To Avoid Them

zombies21If you do any kind of front-end development I’d say that eventually you had run into Zombie events. If you haven’t then let me explain what they are:

Zombie events are events that are raised for elements that have been removed from the DOM and they are the result of using event delegation for event handlers.

Simply put, event delegation is the practice of attaching event handlers to DOM elements that are parents to the actual DOM elements raising the events (the event targets) as opposed to the practice of attaching event handlers directly onto the DOM elements that actually raise the events (the event targets).

Event Delegation – An Example

As an example, suppose we have a list of links. Instead of attaching a click event handler to each li element we instead attach all of the click event handlers to a parent tag of the li elements, the ul tag, or to a div element serving as a container, or even to the body element itself. That is, in a nutshell, what event delegation is.

First, the markup

<div id="page_container">
    <ul>
        <li><a href='#'><span class='somelist'>some text</span></a></li>
        <li><a href='#'><span class='somelist'>some text</span></a></li>
        <li><a href='#'><span class='somelist'>some text</span></a></li>
    </ul>
</div>

and then the JavaScript

(function ( window, $ ) {
    'use strict';
    $( function () {
        $( '#page_container' ).on( 'click', function ( event ) {
            // we only are interested in the event if it was raised by a span element with a class of 'somelist'
            var $eventTarget = $( event.target );
            if ( $eventTarget.attr( 'class' ) === 'somelist' ) {
                window.alert( $eventTarget.attr( 'class' ) );
            }
        } );
    } );
}( window, jQuery ));

In the example markup above, a list is created consisting of 3 anchor tages, each of which has a span tag with a class of ‘sometext’ and in the JavaScript example code above, all click events are delegated to the div whose id is ‘page_container’. When the click event is raised, it will bubble up the DOM and when it reaches the parent container with an id of ‘page_container’ the event callback function will be called. In the event callback function, since we are only concerned with click events that were raised by span elements with a class of ‘sometext’, we filter for only those related events and ignore those that aren’t.

The Advantage Of Using Event Delegation

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time which would be a commaon need in dynamic pages, specifically single page applications, where dom elements are added to and removed in response to the user’s interaction with the page.

The Disadvantage Of Using Event Delegation Are Zombie Events

While the benefits of using event delegation far outweigh its disadvantages, you do have to insure that when elements are removed from the page that any delegated events associated with those elements are removed as well. If these aren’t removed then the result will be Zombie events.

Avoiding Zombie Events & Killing Them If You Have Them

To kill Zombie events you first have to know how they are created. Once you understand that, getting rid of the little buggers is easy. If you’d like to learn all about Zombie events, how they are created and how you can eliminate them, then I suggest you head on over to my repo on GitHub where you can do just that!

And That’s A Wrap!

As always, feel free to leave comments and feedback. I always enjoy hearing from you.

:q