Javascript Dynamic Events / Javascript Custom Events
I often asked myself: How do I create a custom event in javascript?
Something I have been using for quite awhile now is my own custom event handler for javascript, it’s pretty simple compact and easy to use
To use; just copy the devent function to the page in which it needs to be used.
Initialize it by xxEventName = new devent()
You can set what happens when the event is fired by assigning a function to the XXEventName.myEvent property, and you can trigger the event by using the XXEventName.fire() method.
The example below is the best method on which to use it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>oop Example</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function devent(runonce)
{
/******************
* Javascript Dynamic Events
* (c) joesblog.me.uk 2011
*******************/
// event has run
this.onEvent_hasrun = false;
// only allow running once
this.onEvent_runonce = runonce;
// event function
this.myEvent = function () { };
// now obsolete
this.myCallback = null;
//data to be passed to event
this.myEvent_Data = null;
// how many times the event has been fired
this.myEventCount = 0;
//fire the event , in other words execute the function assigned in myEvent
this.fire = function ()
{
if (this.myEvent != null)
{
if (!this.onEvent_runonce)
{
this.onEvent_hasrun = true;
this.myEventCount++;
this.myEvent();
return;
}
else
{
if (!this.onEvent_hasrun)
{
this.onEvent_hasrun = true;
this.myEventCount++;
this.myEvent();
} else
{ return; }
}
}
}
}
///An example of a static javascript class
var myStaticClass = new function ()
{
// the event for when the sum has been done
this.mathsDone = new devent();
// the result of the addition
this.simpleMaths = null;
//The interval object timer.
this.waitInterval = null;
//self explainatory
this.countDown = 5;
//default countdown
this.defaultCount = 5;
//initialise all the objects and things that we need in this class
this.init = function ()
{
//clear the interval
this.waitInterval = null;
//set the coutndown to its starting position
this.countDown = this.defaultCount;
}
//function called no the interval 'pulse'
this.controlTime = function ()
{
if (myStaticClass.countDown == 0)
{ ///if all the countdown has reached zero, do the maths, reset the countdown and clear the interval object
myStaticClass.doSimpleMaths();
myStaticClass.countDown = myStaticClass.defaultCount;
clearInterval(myStaticClass.waitInterval);
}
else
{
myStaticClass.countDown--;
}
document.getElementById('countdown').innerHTML = myStaticClass.countDown
}
this.doSimpleMaths = function ()
{
myStaticClass.simpleMaths = (100 * 100) + 5;
this.mathsDone.fire(); //fire the mathsDone event and cause the function we have set to run
}
this.start = function ()
{
myStaticClass.waitInterval = setInterval(myStaticClass.controlTime, 1000);
}
}
//An example of a nonStaticClass
function nonStaticClass(constructorVar1, constructorVar2)
{
this.aVar = constructorVar1;
this.bVar = constructorVar2;
this.result = 12;
this.method = function () { this.result = this.aVar + this.bVar; alert('do something'); }
}
var nonStaticClass_Instance = null;
$('document').ready(function ()
{
//init the class
myStaticClass.init();
//assign a function to the mathsdone event
myStaticClass.mathsDone.myEvent = function ()
{
alert(myStaticClass.simpleMaths);
}
nonStaticClass_Instance = new nonStaticClass(5, 12);
});
</script>
<style type="text/css">
body {
font-family: verdana;
}
.centerDiv {
height: 500px;
width: 500px;
background-color: #eaeaea;
margin: auto;
border-radius: 5px;
border: solid 1px #ccc;
}
.centerDiv p {
padding: 10px;
}
input[type=button] {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="centerDiv">
<p>Click below and then Wait <span id="countdown">5</span> seconds</p>
<input type="button" value="click ME" onclick="myStaticClass.start()" />
<input type="button" value="click ME non Static method" onclick="nonStaticClass_Instance.method()" />
</div>
</body>
</html>