This example uses more complex event handlers and the zEvent object : zEvents : Event JAVASCRIPT TUTORIALS


JAVASCRIPT TUTORIALS » Event » zEvents »

 

This example uses more complex event handlers and the zEvent object

















<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
    <head>
        <title>Page title</title>
        <script type="text/javascript">
/*------------------------------------------------------------------------------
 * JavaScript zEvents Library
 * Version 1.1
 * by Nicholas C. Zakas, http://www.nczonline.net/
 * Copyright (c) 2004-2005 Nicholas C. Zakas. All Rights Reserved.
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307 USA
 *------------------------------------------------------------------------------
 */  

/**
 * Encapsulates information about an event.
 * @scope public
 * @class
 */
function zEvent() {

    /**
     * The type of event.
     * @scope public
     */
    this.type /*: String */   null;
    
    /**
     * The object that caused the event.
     * @scope public
     */
    this.target /*: zEventTarget */ null;
    
    /**
     * A secondary object related to the event.
     * @scope public
     */
    this.relatedTarget /*: zEventTarget */ null;
    
    /**
     * Indicates whether or not the event can be canceled.
     * @scope public
     */
    this.cancelable /*: boolean */ false;
    
    /**
     * The time that the event occurred.
     * @scope public
     */
    this.timeStamp /*: long */ null;
    
    /*
     * Set to false to cancel event.
     * @scope public
     */
    this.returnValue /*: boolean */ true;    
}

/**
 * Initializes the event object with information for the event.
 * @scope public
 @param sType The type of event encapsulated by the object.
 @param bCancelable True if the event can be cancelled.
 */
zEvent.prototype.initEvent = function (sType /*: String */,
                                       bCancelable /*: boolean */) {
    this.type = sType;
    this.cancelable = bCancelable;
    this.timeStamp = (new Date()).getTime();
};

/**
 * Prevents the default behavior for an event.
 * @scope public
 */
zEvent.prototype.preventDefault = function () {
    if (this.cancelable) {
        this.returnValue = false;
    }
};

/**
 * Any class that wants to support events should inherit from this.
 * @class
 * @scope public
 */
function zEventTarget() {

    /**
     * Array of event handlers.
     * @scope private
     */
    this.eventhandlers /*: Object */ new Object();
}

/**
 * Adds an event listener function to handle the type of event.
 * @scope public
 @param sType The type of event to handle (i.e., "mousemove", not "onmousemove").
 @param fnListener The listener function for the event.
 */
zEventTarget.prototype.addEventListener = function (sType /*: String */,
                                                    fnListener /*: Function */) {
    if (typeof this.eventhandlers[sType== "undefined") {
        this.eventhandlers[sTypenew Array;
    }   
    
    this.eventhandlers[sType][this.eventhandlers[sType].length= fnListener;                                                    
};

/**
 * Causes an event to fire.
 * @scope public
 @param oEvent The event object containing information about the event to fire.
 @return True if the event should continue, false if not.
 */
zEventTarget.prototype.dispatchEvent = function (oEvent /*: zEvent *//*: boolean */ {

    /*
     * Set the target of the event.
     */
    oEvent.target = this;

    /*
     * Call each event handler and pass in the event object.
     */
    if (typeof this.eventhandlers[oEvent.type!= "undefined") {
        for (var i=0; i < this.eventhandlers[oEvent.type].length; i++) {    
            this.eventhandlers[oEvent.type][i](oEvent);
        }
    }

    /*
     * Return the value of returnValue, which is changed to false
     * when preventDefault() is called.
     */
    return oEvent.returnValue;                                                   
};

/**
 * Removes an event listener function from handling the type of event.
 * @scope public
 @param sType The type of event to remove from (i.e., "mousemove", not "onmousemove").
 @param fnListener The listener function to remove.
 */
zEventTarget.prototype.removeEventListener = function (sType /*: String */,
                                                       fnListener /*: Function */) {
    if (typeof this.eventhandlers[sType!= "undefined") {
        var arrTemp = new Array;
        for (var i=0; i < this.eventhandlers[sType].length; i++) {
            if (this.eventhandlers[sType][i!= fnListener) {
                arrTemp[arrTemp.lengththis.eventhandlers[sType][i];
            }
        }
        this.eventhandlers[sType= arrTemp;
    }   
                                                   
};
        
        </script>
        <script type="text/javascript">
//sample class
function Car() {

    //inherit properties from zEventTarget
    zEventTarget.apply(this);

    //property indicating if the car is running
    this.running = false;
}

//inherit methods from zEventTarget
Car.prototype = new zEventTarget();

//method to start engine
Car.prototype.start = function () {

    //create event object
    var oEvent = new zEvent();

    //the event is called "start" and is cancelable
    oEvent.initEvent("start"true);

    //fire the event
    if (this.dispatchEvent(oEvent)) {

       //if dispatchEvent() returns true, set the flag
       this.running = true;
    }

};

//method to stop engine
Car.prototype.stop = function () {

    //create event object
    var oEvent = new zEvent();

    //the event is called "stop" and is cancelable
    oEvent.initEvent("stop"true);

    //fire the event
    if (this.dispatchEvent(oEvent)) {

        //if dispatchEvent() returns true, set the flag
        this.running = false;
    }

};             
        </script>
        <script type="text/javascript">
           //sample object
           var oCar = new Car();
           
           //assign event handler for "start" event
           oCar.addEventListener("start"function(oEvent) {
               alert("Event name: " + oEvent.type);
               alert("Event can be cancelled: " + oEvent.cancelable);
           });
           
        </script>
 
 
    </head>
    <body>
        
        <script type="text/javascript">
        
            //call the start() method
            oCar.start();
        
        </script>
        <P>This example uses more complex event handlers and the <code>zEvent</code>
        object.</p>
    </body>
</html>







HTML code for linking to this page:

Follow Navioo On Twitter

JAVASCRIPT TUTORIALS

 Navioo Event
» zEvents