HTML and CSS Reference
In-Depth Information
Application Design
Tocreateourframework,wewillbecreatingobjectsandresourcefilesthatwillhelpusdesign
our application. Here is a brief run-down of what we will be creating:
EventDispatcher.js
The base class for objects that need to broadcast events to other objects
Ornament.js
A class that represents the draggable objects in the application
DisplayList.js
A class that represents the “retained mode” that we will simulate for our application
GameUtilities.js
A recourse file filled with nifty functions that we can reuse
DragAndDrop.js
The main application class
DragAndDrop.html
The HTML file that pulls all of our code together
You can find these files in the Chapter 11 /draganddrop folder in the code distribution.
EventDispatcher.js
The first thing we need to do is to create a way for our JavaScript object to subscribe to and
dispatch events. Standard DOM objects can have event listeners to listen for events—for ex-
ample:
false );
However, Canvas images and drawing paths cannot create events because they are not kept
in a retained mode. Our task is to create an event dispatcher object in JavaScript that we can
use as the base class for other objects. We will use the EventDispatcher object as the base
class for our Ornament class, so when an ornament is clicked, we can dispatch an event and
the subscriber to that event can take some action.
theCanvas . addEventListener ( "mouseup" , onMouseUp , false
EventDispatcher.js needs the following three methods:
Search WWH ::




Custom Search