Javascript Dynamic Event

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>

Demo of the code

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>