JavaScript Tutorial/Event/zEvents

Материал из Web эксперт
Перейти к: навигация, поиск

The preventDefault() method from zEvent is used to prevent the running flag from being set to true

   <source lang="javascript">

<!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[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;
   }   
                                                  

};

       </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("Cancelling the start...");
              oEvent.preventDefault();
          });
          
       </script>


   </head>
   <body>
       
       <script type="text/javascript">
       
           //call the start() method
           oCar.start();
           
           //now, what is the value of running?
           alert("Running: " + oCar.running);
       
       </script>

This example uses more complex event handlers and the zEvent object. Also, the preventDefault() method is used to prevent the running flag from being set to true.

   </body>

</html></source>


This example uses more complex event handlers and the zEvent object

   <source lang="javascript">

<!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[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;
   }   
                                                  

};

       </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>

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

   </body>

</html></source>


This example uses simple event handlers to alert you when the start() and stop() methods are called

   <source lang="javascript">

<!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[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;
   }   
                                                  

};

       </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() {
              alert("starting");
          });
          
          //assign event handler for "stop" event
          oCar.addEventListener("stop", function() {
              alert("stopping");
          });
          
       </script>


   </head>
   <body>
       
       <script type="text/javascript">
       
           //call the start() method
           oCar.start();
           
           //check to make sure the car is running
           alert("Running:" + oCar.running);
           
           //call the stop() method
           oCar.stop();
       
       </script>

This example uses simple event handlers to alert you when the start() and stop() methods are called.

   </body>

</html></source>