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>