Event JavaScript Tutorial



    
        Page title
        
/*------------------------------------------------------------------------------
 * 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[sType] = new 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.length] = this.eventhandlers[sType][i];
            }
        }
        this.eventhandlers[sType] = arrTemp;
    }   
                                                   
};
        
        
        
//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;
    }
};             
        
        
           //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);
           });
           
        
 
    
    
        
        
        
            //call the start() method
            oCar.start();
        
        
        

This example uses more complex event handlers and the zEvent
        object.