Version 1.0Using event listeners

Overview

In Glow you listen for an event by calling glow.events.addListener

glow.events.addListener("#nav", "click", function(event) { alert( "hello!" );
});

The first parameter is the thing to listen to. This can be an object, NodeList or CSS selector as above. The second parameter is the event to listen for, note that this doesn't include "on", event names are like "mouseover" rather than "onMouseover". The third parameter is the action to take when the event occurs, in the form of a function.

So, in the above example we're listening for click events on the element with the id 'nav'. "hello" will be alerted when the user clicks on 'nav', or anything within it.

Overriding the default action of an event

It's common to want to cancel the default action of an event. For instance, you may want to prevent a form from submitting, or a link being followed. You do this by returning false from the callback.

glow.events.addListener("#myForm", "submit", function(event) { var formValues = glow.dom.get(this).val(); if (formValues.name == "") { alert("You must enter your age"); return false; }
});

In the above, we return false if the 'name' field has not been filled in, this prevents the form submitting and the data being sent to the server.

The event object

Each event callback is passed in an event object. This object holds information about where the event started (via the "source" property), and any additional information the event provides. For instance, a "mouseOut" event will provide the element the mouse has moved to, via the "relatedTarget" property.

glow.events.addListener("#myLink", "mouseover", function(event) { // here you can use event.relatedTarget to find out where // the mouse pointer came from
});