After spending a few hours getting comfortable with Yahoo!’s new Event utility that was recently released along with many other sweet tools via YUIBlog, I became convinced that it is the dopest, sweetest, most tight, most sexiest event utility on the planet. With a little crunching and some gZipping I was able to get this puppy down to meezily weezily 2k.
Furthermore, when I say forget addEvent, I mean any and every version of addEvent you can think of. This goes for Scott Andrew’s original addEvent function, every entry from the addEvent recoding contest, even Prototype’s Event observer and its many properties and extensions. I even had a stab at it myself and was pretty impressed with the outcome.
With all that said, not only is the Yahoo! event utility fresh and so clean by cleaning up some of the mess that other addEvent functions leave behind, it does indeed do quite a few other clever things you wouldn’t expect but will knock your socks off. To get started in experiencing this sweet dope tight sexy Event utility, simply plug in the following files into your JavaScript document as follows:
Inserting the YUI Event util
<script type='text/javascript' src='/path/to/YAHOO.js'></script>
<script type='text/javascript' src='/path/to/event.js'></script>In my particular case after crunching and gZipping it, the filename changed to event.php and I inserted the following lines of code at the very top:
gZipping it up
<?php
ob_start ('ob_gzhandler');
header('Content-type: text/javascript; charset: UTF-8');
header('Cache-Control: must-revalidate');
$offset = 60 * 60 * 24 * 30;
$ExpStr = "Expires: " .
gmdate('D, d M Y H:i:s',
time() + $offset) . ' GMT';
header($ExpStr);
?>
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* The rest of the code goes here...*/Awesome, now that that’s out of the way, lemme tell you just a few of it’s slick features…
It’s Dope because…
It’s got Handler Attachment Deferral. According to the event utility API document: If you attempt to attach a handler to an element before the page is fully loaded, the Event component will attempt to locate the element. If the element is not available, Event periodically checks for the element until the window.onload event is triggered. Oh my F’Gosh! Is that not dope? In a way, it cleans up your mess just incase you goofed.
It’s Sweet because…
It’s got Automatic Scope Correction. By default in Internet Explorer (using the attachEvent method) when you look at the this object within your callback function, it looks at the window object whereas according to DOM2 methods it should be the element from which triggered the event. The YUI Event.addListener method corrects this behavior and appropriately changes the scope for you. Albeit some of the entries from the recoding contest fixed this as well, this is indeed another reason why this thing is also so sweet. Also note that Prototype.js does not do this by default but Ryan Campbell has shared with us a workaround to maintain it. Eitherway, no workarounds here, it just straight up works out of the box.
