Comments on: JavaScript Event Delegation is Easier than You Think

By: Anonymous

Anonymous — Thu, 27 Nov 2008 14:54:44 +0000

hhahahahahhahaha

By: tgoyer

tgoyer — Tue, 12 Aug 2008 23:34:45 +0000

the event bubbles up from the originating element to the top of the DOM tree

My understanding is that the bubbling occurs only up to the element where the event is handled. Only if there are no event handlers for that event type does it bubble to the top.

Am I mistaken?

By: Rajakumar

Rajakumar — Fri, 01 Aug 2008 19:27:43 +0000

well done .. The way you explored is really nice

By: Richard Quadling

Richard Quadling — Wed, 23 Jul 2008 09:09:16 +0000

Another great use for Event Delegation is when you amend the document in realtime, say in response to user events or from AJAX data, etc.

Because you have to drop the events if you are going to drop the elements, event delegation allows you to attach the events to the container which gets the HTML or DOM updates. So now the container’s contents can change as much as you like. And as long as you have some sort of standard to the naming of IDs (or whatever you want to use to identity the elements you want to watch the behaviour on), then you can have it all.

Nice article.

Richard Quadling.

By: Ramius

Ramius — Wed, 23 Jul 2008 08:42:28 +0000

This is an excellent article/blog entry. Thanks a lot and keep stuff like this coming!

By: Andreas

Andreas — Wed, 23 Jul 2008 06:57:57 +0000

PPK describes a way to get focus and blur delegation work in IE using focusin and focusout:

http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

By: brothercake

brothercake — Wed, 23 Jul 2008 05:04:32 +0000

mouseout doesn’t have quirky behavior, it behaves exactly as it should; it only seems quirky because it doesn’t fit our preconception of what it *should* mean (according to the capture behavior that we learnt as normal in the days of netscape 4!)

Here’s a simpler way of adjusting the model:

element.contains = function(node)
{
	if(node == this) { return true; }
	if(node == null) { return false; }
	else { return this.contains(node.parentNode); }
}

Which can be used to evaluate an event on any element, ie. if(element.contains(e.target)) { ...