JavaScript Tutorial/Event/zEvents
The preventDefault() method from zEvent is used to prevent the running flag from being set to true
<!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>
<P>This example uses more complex event handlers and the <code>zEvent</code>
object. Also, the <code>preventDefault()</code> method is used to prevent the <code>running</code>
flag from being set to true.</p>
</body>
</html>
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[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>
<P>This example uses more complex event handlers and the <code>zEvent</code>
object.</p>
</body>
</html>
This example uses simple event handlers to alert you when the start() and stop() methods are called
<!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>
<P>This example uses simple event handlers to alert you when the
<code>start()</code> and <code>stop()</code> methods are called.</p>
</body>
</html>