Google Loco – A Lesson on Event Handling

In the GoogleTV post, the video mentions (briefly) a Google service called Loco. I have decided, for fun, to make this service. Introducing Google Loco. I don’t make a dime from it and I redirect all search traffic to Google.com. Just a funny joke site to show your friends. 😉

Google Loco has some pretty nifty JavaScript that I’d like to share. The main interest is in the script that:

  • In Firefox: flips around the text you type in
  • In all browsers: randomizes the colors

I will cover the text flipping in another post. This one will focus on event handling.

Event Handling Mini-Lesson

What the heck is event handling anyway? Well, that’s the “onclick” or “onmouseover” stuff you have probably encountered. It’s a term for telling the computer to handle and event when something happens. Thus,

onclick=”SOMETHING”

Is read as “do SOMETHING when a CLICK event happens”. Event handling is an advanced topic in JavaScript. So how do we do it in Google Loco?

First of all, I added an event handler that fires when the page loads.  You see, in the old days, people used stuff like this:

<body onload=”initializeOnLoad()”>

But we’re in 2007 now. Things are done differently. The above command now can be redone using event handlers in the following syntax (see the actual site for the advanced, error proof syntax):

window.addEventListener(‘load’, initializeOnLoad, false) // syntax different for IE, see .js file

I know the second one looks more confusing, but it’s better. Why? Because you aren’t mixing business logic with your presentation layer (JavaScript separate from HTML). Secondly, this line can be put anywhere on the page, making it more portable since it can reside inside a JS file.

You’ll notice in the event handler example, initializeOnLoad doesn’t have parentheses after it. This is because, in short, JavaScript treats functions like variables.

When the parentheses are removed it’s like saying “don’t execute me, I’m just the messenger.” My, that was a very clever pun…

Or in other words,  initializeOnLoad() executes whatever is inside that function. InitializeOnLoad (no parentheses) refers to the contents, but doesn’t actually execute anything. This allows you to copy it around, modify it, reassign it, or whatever else you might do with a regular variable. In our case, we assigned it to the event handler for when the page loads.

The page itself uses a “loco” variable. You’ll notice there’s stuff like:

addEvent(document.getElementById(‘typed-box’), ‘keydown’, loco.locoEffects);

This, for example, would grab the element “typed-box”, and cause loco.locoEffect to fire whenever a key is pressed on it. If I had used “window” instead of “document.getElementById(‘typed-box’)”, the event would fire when a key is hit anywhere on the page.

Anyway, that loco.locoEffects thing… That’s a class. Well, a faked class. It’s really a variable called loco with another variable called locoEffects inside it. This inner variable just so happens to be a function.  Why did I do this? Oh, just to keep the global namespace uncluttered (as in, so I don’t have to worry about overwriting a native JavaScript function).

10 thoughts on “Google Loco – A Lesson on Event Handling”

  1. “Google Loco has some pretty nifty JavaScript that I’d like to share. The main interest is in the script that:
    In Firefox: flips around the text you type in
    In all browsers: randomizes the colors”

    i wanna c “da flip around..” in OPERA 🙂

  2. The google “easter egg” tricks are the coolest things ever! I love the person who made the stuff!!! <3 Thanks for being SOOOO creative! My fave is the google gothic

  3. What do i think? Are you kidding me? It’s brilliant!! I wish I had an Idea like this.
    Along with all others “variations” of google this is one of the best!

  4. There is also another way of doing it _if_ you don’t need the extra functionality provided by the addEventListener() (i.e. userCapture, multiple listeners etc.)

    document.getElementById(’typed-box’).onkeydown = loco.locoEffects;

    The above is the most cross browser compliant way of attaching events since its supported from DOM 0 event handling.

  5. Hey.. I was thinking of doing that after the TV hoax too!
    Great minds and all…

    I was thinking of redirecting the search to google with some extra keywords (crazy related) to spice the search up a bit – maybe a suggestion for ya!

    Cheers

Comments are closed.