Sponsor

2008/07/22

Tech Times #199 - JavaScript Event Delegation is Easier than You Think

The SitePoint TECH TIMES #199 Copyright (c) 2008
July 22, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)

Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=199

Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved.

INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -

Conference season is right around the corner, and as usual, Team
SitePoint (including yours truly!) will be in Sydney for Web
Directions South. Care to join us?

Held in Sydney, Australia every year, Web Directions South [1]
is one of the biggest conferences for web professionals in the
world. Team SitePoint has been regular [2] attendees [3],
supporters [4] and media partners [5] of this conference series
since Day One. The conference is on again this year, running
from September 25-26 (with two days of optional workshops on the
23rd and 24th).

Matt Magain has put together an excellent run-down [6] of the
SitePoint authors, bloggers, and hangers-on who will be speaking
at the conference, as well as the international superstars like
JavaScript guru Douglas Crockford.

DISCOUNT FOR SITEPOINT READERS

If you're thinking of attending then you might want to hurry:
Early Bird pricing (save $200 off the regular ticket price) ends
tomorrow, July 23rd.

Luckily for SitePoint readers, you can save an additional $55
off that by quoting the code WDS-SP when you purchase your
ticket. That brings the ticket price down to $795 - but only
if you purchase on or before July 23rd [7].

It really is shaping up to be one of the best web conferences to
date, and SitePoint are proud to have such strong representation.
See the full list of speakers [8], and register to attend [9]
today to take advantage of the Early Bird discount!

[1] <http://south08.webdirections.org/>
[2] <http://www.sitepoint.com/blogs/2007/09/24/sitepoint-at-web-directions-south-webjam/>
[3] <http://www.sitepoint.com/blogs/2008/05/16/web-directions-ux-making-your-users-feel-special/>
[4] <http://www.sitepoint.com/blogs/2006/09/27/sitepoint-at-web-directions-south/>
[5] <http://www.webdirections.org/uncategorized/announcing-the-sitepoint-closing-party-for-web-directions/>
[6] <http://www.sitepoint.com/blogs/2008/07/16/learn-javascript-from-the-master-at-web-directions-south/>
[7] <https://secure.webdirections.org/wds08>
[8] <http://south08.webdirections.org/?page_id=7>
[9] <https://secure.webdirections.org/wds08>

SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

Our web developer customers can sleep at night.

Your job is building great websites for your clients. Lying awake at
night wondering if those sites are accessible is not.

That's why we maintain Fully Redundant Network Operations Center
capabilities from two cities 24/7/365. So you can impress your clients
and still get some shut-eye.

Find out why 3.1 million websites call The Planet home.

Dedicated servers start at just $89:
http://www.eztrackz.com/tracking.aspx?id=86982


IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -

- Introduction
- JavaScript Event Delegation is Easier than You Think
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries


JAVASCRIPT EVENT DELEGATION IS EASIER THAN YOU THINK - - - - - -

If you're into adding a little JavaScript interactivity to your
web pages you may have heard of JavaScript event delegation and
thought it was one of those convoluted design patterns only
hardcore JavaScript programmers worry about. The truth is, if
you already know how to add JavaScript event handlers, it's a
snap to implement.

JavaScript events are the bedrock of all interactivity on web
pages (I mean serious interactivity, not those dinky CSS
drop-down menus). In traditional event handling you add or
remove event handlers from each element as needed. However,
event handlers can potentially cause of memory leaks and
performance degradation -- the more you have, the greater the
risk. JavaScript event delegation is a simple technique by which
you add a single event handler to a parent element in order to
avoid having to add event handlers to multiple child elements.

HOW DOES IT WORK?

Event delegation makes use of two often overlooked features of
JavaScript events: event bubbling [1] and the target element
[2]. When an event is triggered on an element, for example a
mouse click on a button, the same event is also triggered on all
of that element's ancestors. This process is known as event
bubbling; the event bubbles up from the originating element to
the top of the DOM tree. The target element of any event is the
originating element, the button in our example, and is stored in
a property of the event object. Using event delegation it's
possible to add an event handler to an element, wait for an
event to bubble up from a child element and easily determine
from which element the event originated.

HOW WILL IT HELP ME?

Imagine an HTML table with 10 columns and 100 rows in which you
want something to happen when the user clicks on a table cell.
For example, I once had to make each cell of a table of that
size editable when clicked. Adding event handlers to each of the
1000 cells would be a major performance problem and, potentially,
a source of browser-crashing memory leaks. Instead, using event
delegation, you would add only one event handler to the table
element, intercept the click event and determine which cell was
clicked.

[1] <http://www.quirksmode.org/js/events_order.html>
[2] <http://www.quirksmode.org/js/events_properties.html#target>

SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

Rackspace: Go Green Without Sacrificing Server Performance

As the leader in hosting, Rackspace creates solutions built to
fit your needs. Our sole mission is to keep your infrastructure
up and running so you and your company can stay focused on
growth, backed with our 24x7x365 Fanatical Support.

Rackspace hosted severs are designed to be as business friendly
as they are earth friendly. Do your part for the environment
without the sacrifice. We make is easy for our customers to
choose a green configuration or customize one that works for
their business needs. We just take the eco-friendly components
that we already use in our data centers. Make the smart choice
and Go Green with Rackspace Hosting.

Click to learn about how you can Go Green without the sacrifice.
http://www.rackspace.com/383/index.php?green=true&CMP=techtimes_newsletter_july_0708


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

WHAT DOES IT LOOK LIKE IN CODE?

The code is simple; we only need to worry about detecting the
target element. Let's say we have a table element with the ID
"report" and we have added an event handler to the table for the
click event that will call the editCell function. The editCell
function will need to determine the target element for the event
that has bubbled up to the table. Expecting that we'll write a
few event handler functions that will need this functionality,
we'll place it in a separate function called getEventTarget:

function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}

The variable e represents the event object and we need only a
sprinkling of cross-browser code to gain access to and return
the target element, stored in the srcElement property in
Internet Explorer and the target property in other browsers..

Next is the editCell function that calls the getEventTarget
function. Once we have a reference to the target element it's up
to us to make sure the element is the one we're expecting:

function editCell(e) {
var target = getEventTarget(e);
if(target.tagName.toLowerCase() === 'td') {
// DO SOMETHING WITH THE CELL
}
}

In the editCell function we confirm that the target element is a
table cell by checking its tag name. That check may be over
simplified; what if it's another element inside the table cell
that is the target of the event? A quick modification that adds
code to find the parent td element may be needed. What if some
cells should not be editable? In that case we can add a specific
class name to a non-editable cell and check that the target
element does not have that class name value before making it
editable. Many options are available and you'll just need to
choose the one that suits your application.

WHAT ARE THE PROS AND CONS?

The benefits of JavaScript event delegation are:

- There are less event handlers to setup and reside in memory.
This is the big one; better performance and less crashing.

- There's no need to re-attach handlers after a DOM update. If
your page content is generated dynamically, via Ajax for
example, you don't need to add and remove event handlers as
elements are loaded or unloaded.

The potential problems may be less clear, but once you are aware
of them they're easily avoided:

- There's a risk your event management code could become a
performance bottleneck, so keep it as lean as possible.

- Not all events bubble. The blur, focus, load and unload
events don't bubble like other events. The blur and focus events
can actually be accessed using the capturing phase (in browsers
other than IE) instead of the bubbling phase but that's a story
for another day.

- You need caution when managing some mouse events. If your
code is handling the mousemove event you are in serious risk of
creating a performance bottleneck because the mousemove event is
triggered so often. The mouseout event has a quirky behavior [1]
that is difficult to manage with event delegation.

SUMMARY

There are JavaScript event delegation examples available that
use major libraries: jQuery [2], Prototype [3], and Yahoo! UI
[4]. You can also find examples using no library at all, like
this one from the Usable Type blog [5].

Event delegation is a handy tool to have in your kit should the
need arise and easy to implement.

What do you think about JavaScript event delegation? Add your
comments to the blog:

Stylish Scripting: JavaScript & CSS Blog
by Andrew Tetlaw

JavaScript Event Delegation is Easier than You Think
http://www.sitepoint.com/blogs/?p=2684

[1] <http://www.quirksmode.org/js/events_mouse.html#link8>
[2] <http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery>
[3] <http://devthatweb.com/view/basic-event-delegation-in-prototype>
[4] <http://icant.co.uk/sandbox/eventdelegation/>
[5] <http://usabletype.com/weblog/event-delegation-without-javascript-library/>

SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -

Morae: Usability Testing for Software & Web Sites. An all-digital tool
that enables you to:
-Quickly identify website and software design problems
-Affordably conduct user testing. Quickly calculate metrics & graph results.
-Deliver professional results in a fraction of the time.
http://www.techsmith.com/morae.asp?cmp=StPtUX3


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Hope you enjoyed this issue's JavaScript tip. See you next week
for another issue of the Tech Times!

Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times


NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -

Take Command with Ajax
by Stoyan Stefanov

Want to get a bang out of your Ajax artillery? In this hands-on
tutorial, Stoyan puts Ajax on the front line as he develops a
web app with which you can execute shell commands on your web
server. The downloadable code provides a real tactical advantage
as Stoyan marshals JavaScript and XML to create the app.

http://www.sitepoint.com/article/1490


TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -

Widely Used Screen Reader?
<http://www.sitepoint.com/forums/showthread.php?threadid=531920>

design or develop first?
<http://www.sitepoint.com/forums/showthread.php?threadid=557773>

Books on Programming Version Control
<http://www.sitepoint.com/forums/showthread.php?threadid=557431>


MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -

News & Trends Blog: INDUSTRY NEWS FOR WEB PROFESSIONALS

Zembly: Social Development for Social Apps - 100 Invites (1
comment)
http://www.sitepoint.com/blogs/2008/07/18/zembly-social-development-for-social-apps-100-invites/

Use Google Gears for Fast Client-Side Search (3 comments)
http://www.sitepoint.com/blogs/2008/07/17/use-google-gears-for-fast-client-side-search/

Microsoft Opens Live Mesh to All (9 comments)
http://www.sitepoint.com/blogs/2008/07/17/microsoft-opens-live-mesh-to-all/


Web Tech Blog: TECHNICALLY SPEAKING

Conditional Comments for HTML Email (4 comments)
http://www.sitepoint.com/blogs/2008/07/18/conditional-comments-for-html-email/

Learn JavaScript From The Master At Web Directions South (2
comments)
http://www.sitepoint.com/blogs/2008/07/16/learn-javascript-from-the-master-at-web-directions-south/


PHP Blog: DYNAMICALLY TYPED

Keeping Current With PHP (5 comments)
http://www.sitepoint.com/blogs/2008/07/16/keeping-current-with-php/


Ruby on Rails Blog: GET ON TRACK

Let's get meta: missing method (3 comments)
http://www.sitepoint.com/blogs/2008/07/11/lets-get-meta-missing-method/


ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -

Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)

Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com


HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -

People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.


ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Send suggestions and comments to:
techtimes@sitepoint.com

To subscribe, send a blank email to:
subscribe@sitepoint.com

The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php

The SitePoint Tech Times is hosted by SparkList:
http://www.sitepoint.com/newsletters/sparklist/

The SitePoint Tech Times is (c) 1998-2008 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.

SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA

You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us

To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php

To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>

To leave this list, send a blank email to:
leave-2286439-2266608.e57363ef99c8b59c8667cca2fd106cbe@sitepoint.sparklist.com

Do Not Reply to this email to unsubscribe.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

No comments:

Post a Comment

Keep a civil tongue.

Label Cloud

Technology (1464) News (793) Military (646) Microsoft (542) Business (487) Software (394) Developer (382) Music (360) Books (357) Audio (316) Government (308) Security (300) Love (262) Apple (242) Storage (236) Dungeons and Dragons (228) Funny (209) Google (194) Cooking (187) Yahoo (186) Mobile (179) Adobe (177) Wishlist (159) AMD (155) Education (151) Drugs (145) Astrology (139) Local (137) Art (134) Investing (127) Shopping (124) Hardware (120) Movies (119) Sports (109) Neatorama (94) Blogger (93) Christian (67) Mozilla (61) Dictionary (59) Science (59) Entertainment (50) Jewelry (50) Pharmacy (50) Weather (48) Video Games (44) Television (36) VoIP (25) meta (23) Holidays (14)

Popular Posts