Tuesday, May 30th, 2006

Publishing Custom Events in JavaScript

Category: Examples, JavaScript, Library, Yahoo!

Dustin Diaz is at it again, this time discussing “custom events” and how to create and use them. A custom event is an event that you define (e.g. onDrool vs. onBlur).

Dustin uses the Yahoo! UI event util library to show off how to play with events:


  1. // Define Event
  2. var onMenuCollapse = new YAHOO.util.CustomEvent('menu collapse');
  4. // Define Event
  5. onMenuCollapse.fire();
  7. // Subscribe to an event
  8. onMenuCollapse.subscribe(swapColors);

To see it in action you can check out a couple of examples:

YUI Custom Events

Posted by Dion Almaer at 7:05 am

3.9 rating from 32 votes


Comments feed TrackBack URI

Neat, but the drag n’ drop example ran at 100% CPU after multiple tries.
Check please …

Comment by Dan — May 30, 2006

Where is the original article? Can’t find a link.


Comment by Mats Henricson — May 30, 2006

@Dan: I ran the drag ‘n drop in multiple browsers (mac and win), multiple times, and never ran into the issue of my CPU flying out the roof. You might have had other side applications running

@Mats: There is a link to the ‘reference article’ on the demos themselves. :)

Comment by Dustin Diaz — May 30, 2006

Just because I had 4 instances of VS.NET, iTunes, Outlook, Shareaza, and a few Explorer windows open doesn’t mean I should suffer at the hands of lag, does it?
I’ve rebooted since and I still get lag, but I ran it in the alpha of the next Firefox. It could just be me.

Comment by Dan — May 30, 2006

just a note; when creating your own widgets, this pattern might come in handy if you want to provide a nice api for your clients or third party developers. However, native Events are there for a reason: for one, they deliver better performance. What I’m saying is: try to extend your Event handlers with hooks, where developers can add their own code to the handler, whenever and wherever you can. I’d love to show you an example, but I’m typing this on my mobile :P Please forgive me.

Comment by Mike de Boer — May 30, 2006

Getting lag here too on the drag and drop demo. I have multiple programs running as well, but I think that’s true for most web users.

Comment by Tom — May 30, 2006

The point of the excersize isn’t the dragging and the dropping. It’s the mere demonstration of a custom event. Try using IE or Safari (OS native browsers). They typically have a better history of rendering the dom faster than non OS native browsers (Firefox, or Opera). Indeed firefox will always be more choppy for something like drag and drop when you’re trying to update XY coordinates upon every mouse movement.

Comment by Dustin Diaz — May 30, 2006


Hate to disagree with you, but my experience says that Firefox on Windows is much faster than IE when doing things like Drag and Drop (ala script.aculo.us).

BTW. I’ve never posted on your site before. Love the live preview!

Comment by Peter LaComb — May 31, 2006

Hi Peter, you’re still talking about the actual drag and drop, so your disagreement is on the wrong basis. The demo was indeed more than just dragging and dropping, like I said, it’s also updating anothers XY coordinates on the fly. Nevermind the fact that everyone is still missing the point of the article (CustomEvent).

Comment by Dustin Diaz — May 31, 2006

Leave a comment

You must be logged in to post a comment.