³ÉÈËÂÛ̳

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
	);
});