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

Overview

The method glow.events.fire allows you to fire events programmatically without them having to actually occur. Consider the following 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");
});
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");
	});
});

... it gives you this example:

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

If we wanted to change what happens when a user chooses a number, we would have to edit four parts of the code, these being the 'keydown', 'keyup', 'mousedown' and 'mouseup' events. We could make the code simpler to edit in the future if we made the key events call the mouse events, then we only need to edit the 2 mouse events.

To do this we can use the method glow.event.fire In the key events. This is what our new key events look like:

JavaScript

glow.events.addListener("#myNumber", "keydown", function(event) {
	glow.event.fire(glow.dom.get("li#z"+String.fromCharCode(event.keyCode))[0], "mousedown");
});
glow.events.addListener("#myNumber", "keyup", function(event) {
	glow.event.fire(glow.dom.get("li#z"+String.fromCharCode(event.keyCode))[0], "mouseup");
});

Another example

Here is an example that chains four events together. Click on one of the boxes below to start the example:

To create this example you need an event listener for each box:

HTML

<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>

JavaScript

glow.events.addListener("div#box1", "click", function(event) {
	glow.dom.get(this).addClass("highlight");
	setTimeout(
		function() {
			glow.events.fire(glow.dom.get("div#box2")[0], "click");
			glow.dom.get("div#box1").removeClass("highlight");
		},
		100
	);
});
glow.events.addListener("div#box2", "click", function(event) {
	glow.dom.get(this).addClass("highlight");
	setTimeout(
		function() {
			glow.events.fire(glow.dom.get("div#box3")[0], "click");
			glow.dom.get("div#box2").removeClass("highlight");
		},
		100
	);
});
glow.events.addListener("div#box3", "click", function(event) {
	glow.dom.get(this).addClass("highlight");
	setTimeout(
		function() {
			glow.events.fire(glow.dom.get("div#box4")[0], "click");
			glow.dom.get("div#box3").removeClass("highlight");
		},
		100
	);
});
glow.events.addListener("div#box4", "click", function(event) {
	glow.dom.get(this).addClass("highlight");
	setTimeout(
		function() {
			glow.events.fire(glow.dom.get("div#box1")[0], "click");
			glow.dom.get("div#box4").removeClass("highlight");
		},
		100
	);
});

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.