Version 1.5Using event listeners

Overview

In Glow you listen for an event by calling glow.events.addListener. For example, the following code...

HTML

<input type="button" id="myButton" value="Click me" />

JavaScript

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

... produces this example:

The glow.events.addListener method takes three mandatory parameters (and one optional). The first parameter tells the method what element to apply the event to, this can be an object, a CSS selector string (e.g. "input#name") or a glow.dom.nodeList.

The second parameter is the actual event to listen for. Note that this doesn't include "on", event names are like "mouseover" rather than "onMouseover". View full list of events.

The third parameter is the action to take when the event occurs, in the form of a function. This can be either a function call (myFunction) or an actual function (function(e) {alert(e);}).

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) { if (glow.dom.get("#myName").val() == "") { alert("You must enter your name"); 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.

Keyboard events

Keyboard events allows your code to react to the user when they use the keyboard. This code...

HTML

<ul id="myKeyboard"> <li id="z1">1</li> <li id="z2">2</li> <li id="z3">3</li> <li id="z4">4</li> <li id="z5">5</li> <li id="z6">6</li> <li id="z7">7</li> <li id="z8">8</li> <li id="z9">9</li> <li id="z0">0</li>
</ul>

JavaScript

glow.events.addListener("#myNumber", "keydown", function(event) { glow.dom.get("li#z"+String.fromCharCode(event.keyCode)).addClass("click");
});
glow.events.addListener("#myNumber", "keyup", function(event) { glow.dom.get("li#z"+String.fromCharCode(event.keyCode)).removeClass("click");
});

... produces the following example, type a phone number into the text input below:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 0

As you can see everytime you type a number into the text box, the corresponding key on the keyboard above highlights. Now wouldn't it be cool if we could make the keys clickable to update the text box?

Mixing many events together

If we take the example from above, we can add more JavaScript to it to make the keyboard interactive. This code...

JavaScript

glow.events.addListener("#myNumber", "keydown", function(event) { glow.dom.get("li#z"+String.fromCharCode(event.keyCode)).addClass("click");
});
glow.events.addListener("#myNumber", "keyup", function(event) { glow.dom.get("li#z"+String.fromCharCode(event.keyCode)).removeClass("click");
});
var arrLi = glow.dom.get("ul.myKeyboard li");
arrLi.each(function(z) { glow.events.addListener(glow.dom.get(arrLi[z]), "click", function() { glow.dom.get("#myNumber").val(glow.dom.get("#myNumber").val()+glow.dom.get(this).html()); }); glow.events.addListener(glow.dom.get(arrLi[z]), "mouseover", function() { glow.dom.get(this).addClass("highlight"); }); glow.events.addListener(glow.dom.get(arrLi[z]), "mouseout", function() { glow.dom.get(this).removeClass("highlight"); }); glow.events.addListener(glow.dom.get(arrLi[z]), "mousedown", function() { glow.dom.get(this).addClass("click"); }); glow.events.addListener(glow.dom.get(arrLi[z]), "mouseup", function() { glow.dom.get(this).removeClass("click"); });
});

... produces this new example (click the buttons to update the textbox):

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 0

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.

Below is a text box that will update the list of event properties when you click and type into it.

event.altKey

event.attachedTo

event.button

event.capsLock

event.charCode

event.chr

event.ctrlKey

event.key

event.keyCode

event.pageX

event.pageY

event.relatedTarget

event.shiftKey

event.source

event.wheelDelta

Full list of events available to use with glow.events