Playground Blues

Wrapping my head around things like OOP took months. It’s not because I’m an idiot (I don’t think) - it’s just because I needed all the explanations to marinate before having an ah-ha! moment.

I had an ah-ha today, with regards to Event Delegation. I’ve never seemed to completely understand events, yet I use them all the time. They’re an essential aspect of Actionscript and Javascript and there are two basic ways of capturing events, Event Handling and Event Delegation.

Most of us, whether we realize it or not, are familiar with Event Handling. Imagine we have an unordered list with a class name .nav and each item has a link. For this example, I’m going to use jQuery, so if you wanted to call a javascript function when the user clicks a link in the list, you’d do the following:

$('.nav a').each(function() {
    $(this).click(handleClick);
});

function handleClick(event) {
    // fun stuff goes here
}

If you’re jQuery savvy, the above code should be familiar. We’re looping over all the anchor tags within the unordered list and assigning the function “handleClick” to the click event. Each time someone clicks a link, “handleClick” is called and the anchor tag is in the function scope. This is Event Handling.

Event Delegation makes things a little simpler by eliminating the need to loop over every anchor tag. We simply apply the click event to the unordered list like so:

$('.nav').click(handleClick);

Since the click event is registered with the unordered list, it gets fired off when anything inside the list is clicked. The scope of the handleClick function is set to the <ul> but if you want to target the anchor tag below the mouse click, you use event.target. This is Event Delegation.

Both are very powerful but in most instances Event Delegation is going to require less code while boosting performance. Many thanks to Jacob for making this ah-ha moment possible.