Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

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

  • abort
  • afterDrop
  • addItem
  • afterHide
  • afterScroll
  • afterShow
  • blur
  • change
  • click
  • commit
  • dataLoad
  • dataError
  • dataAbort
  • dblclick
  • drag
  • drop
  • enter
  • error
  • focus
  • hide
  • itemClick
  • inputchange
  • itemSelect
  • keydown
  • keypress
  • keyup
  • leave
  • load
  • mousedown
  • mousemove
  • mouseout
  • mouseover
  • mouseup
  • moveStart
  • moveStop
  • removeItem
  • reset
  • resize
  • scroll
  • select
  • show
  • slideStart
  • slideStop
  • sort
  • submit
  • unload

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.