evanculver.com

jQuery $.live() Equivalent in YUI 3

It’s been a while since I’ve posted and since I started at Yahoo! so I figured I’d give a little love to the new toys I’ve had the pleasure of playing with as of late. Clearly, we’re using YUI here at Yahoo! and because of that I’d had to adjust my thinking on a few goto front-end techniques that I relied on jQuery for. I hope to post more on these adjustments I’ve had to make, but we’ll see.

Aside from general patterns involving YUI loader, a major jQuery feature I realized that I had come to rely on is jQuery’s $.live() method.

Let’s say I have some markup like:


<div id="wrap">
    <span id="button">Click Me!</span>
</div>


That’s being dynamically inserted into the DOM.

I got pretty used to doing something like:


$("#id").live("click", function() {
    // do stuff
}


Super handy, but not exactly the best performance-wise. If you read the jQuery documentation (or even the jQuery source), you’ll soon find out that what’s going on behind the scenes is an implied event delegation to the root of the DOM. But, not to get too far off topic, there’s a lot of overhead that comes at the expense of this convenience.

YUI provides the same sort of functionality, albeit in a more explicit fashion via the Event delegate() method. I personally like the design decision that was made by the YUI team considering the performance hits that can be involved with using jQuery’s live method incorrectly, but to be completely fair, you can’t really mind the cleanliness of jQuery’s API. Anyways, you can always read the YUI 3 Event docs, but the above simply becomes:


YUI().use('node', 'node-event-delegate', function(Y) {
    Y.one('#wrap').delegate('click', function(e) {
        // do stuff
    }, '#id');
});


I really like the cleanliness of jQuery, but sometimes, you gotta make a little lemonade outta the lemons you were given, even if they’re a little bit rounder and less yellow than the ones you’ve seen before.

There are definitely some caveats in the jQuery way of doing things as well as in YUI, but I feel like it’s a whole lot harder to screw it up in YUI.

Now, go try it yourself.

Tags: code, delegate, event-delegation, javascript, jquery, live, yui