Perfection Kills

by kangax

Exploring Javascript by example

Event delegation will save the world.

February 19th, 2009

If you ever wanted to know how many event handlers your Prototype.js-based application has, but were afraid to count, this tiny bookmarklet will gladly do that for you!

Accidentally, the snippet demonstrates an absolutely wicked use of Prototype’s sacred technique of inject over Hash.


$H(Event.cache).inject(0, function(m, p) {
  m += $H(p.value).values().flatten().size();
  return m;
});

Enjoy.

Categories: delegation, inject

Comments (13)

  1. Gravatar

    Radoslav Stankov said on Feb 19, 2009 @ 13:44

    Nice one(bw you have one more ‘)’ in the end)
    I generally use my CD3.Behaviors witch have very simple event-delegation build in, so I didn’t have more than 10 ~ 15 event handler, on one of my heavy js project. But on the other side those 10~15 could easy become 4~5/6 with some little effort :)
    10x for sharing

  2. Gravatar

    kangax (article author) said on Feb 19, 2009 @ 19:38

    Thanks, Radoslav.
    I removed the extra parenthesis.

  3. Gravatar

    Zeno said on Feb 27, 2009 @ 16:26

    Thanks for the nice snippet!

    (It helped me debugging a situation in which I was accumulating too many events observers… caused by Low Pro’s reassignAfterAjax=true)

  4. Gravatar

    Phunky said on Mar 5, 2009 @ 7:06

    This wouldn’t work for me :( does it require the latest version of PrototypeJS or would version > 1.6 be fine?

    Sounds like a great little bookmarklet tho!

  5. Gravatar

    kangax (article author) said on Mar 5, 2009 @ 9:58

    @Phunky

    Should work with 1.6+. Which version are you having problem with?

  6. Gravatar

    Ana Wilson said on Mar 6, 2009 @ 13:51

    Juriy:
    I need a code ninja like you for a client of mine who is a MS MVP – he has a js project and only the best talent will do. Are you available for telecommuting consulting engagements? if you email me back I’ll send you my contact info.

  7. Gravatar

    Nrajlich said on Jun 9, 2009 @ 19:11

    Just so you know, this breaks in Prototype 1.6.1 RC2, due to the new way of storing the Event cache. Here’s the fixed version:


    $H(Element.Storage).inject(0,function(m,p){
      if (p.value.get){
        m+= p.value.get("prototype_event_registry").values().flatten().size();
      }
      return m;
    })

  8. Gravatar

    Victor said on Dec 24, 2009 @ 1:40

    the fixed version seems not work in 1.6.1

  9. Gravatar

    Burton Kent said on Feb 1, 2010 @ 16:58

    If you check the <a href="http://www.prototypejs.org/2007/8/15/prototype-1-6-0-release-candidate"?release notes for 1.6.0 you’ll see that they note that “References to observed elements are no longer stored in an internal cache, to prevent leaks.” This may be part of the problem.

Trackbacks

  1. Ajaxian » Watching Prototype events and a nice little tip said:

    [...] shows a nice use of Prototype as he writes a tip to let you see your Prototype based events as they run in your application. A nice little [...]

  2. Tracking Event Observers with Prototype said:

    [...] across Juriy Zaytsev’s Event Counter Bookmarklet I decided to do a bit of debugging of an internal data analyst application current under [...]

  3. Vodori’s Blog » How to eavesdrop on all published Dojo events said:

    [...] no more!  Inspired by a kinda-sorta somewhat example in Prototype (found via Ajaxian), I created a Dojo bookmarklet that can be used to log all events to the [...]

  4. Eventlist Bookmarklet for Prototype.js said:

    [...] by kangax’ bookmarklet showing the overall number of event handlers registered with Prototype’s [...]

Leave a Comment

Please, don't forget to escape your input (<, > and &). Wrap code sections with <pre>

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>