javascript

Chapter 18: Advanced Techniques
};
EventUtil.removeHandler(document, “mouseup”, handleEvent);
return dragdrop;
}();
This code defines three events: dragstart , drag , and dragend . Each of these events sets the dragged
element as the target and provides x and y properties to indicate its current position. These are fired on
the dragdrop object, which later is augmented with the enable() and disable() methods before
being returned. This slight change in the module pattern allows the DragDrop object to support events
such as the following:
DragDrop.addHandler(“dragstart”, function(event){
var status = document.getElementById(“status”);
status.innerHTML = “Started dragging “ + event.target.id;
});
DragDrop.addHandler(“drag”, function(event){
var status = document.getElementById(“status”);
status.innerHTML += “ < br / > Dragged “ + event.target.id + “ to (“ + event.x +
“,” + event.y + “)”;
});
DragDrop.addHandler(“dragend”, function(event){
var status = document.getElementById(“status”);
status.innerHTML += “ < br / > Dropped “ + event.target.id + “ at (“ + event.x +
“,” + event.y + “)”;
});
Here, event handlers are added for each event of the DragDrop object. An element is used to display the
current state and location of the dragged element. Once the element is dropped, you have a listing of all
the intermediate steps it took since it was initially dragged.
Adding custom events to DragDrop makes it a more robust object that can be used to manage complex
drag-and-drop functionality in a web application.
Summary
Functions in JavaScript are quite powerful, because they are first - class objects. Using closures and
function context switching, there are a number of powerful ways functions can be used. For example:
❑
❑
❑
❑
It ’ s possible to create scope - safe constructors, ensuring that a constructor called without the new
operator will not change the wrong context object.
You can use lazy loading functions by delaying any code forking until the first time that the
function is called.
Function binding allows you to create functions that are always run in a specific context, and
function currying allows you to create functions that have some of their arguments already
filled in.
Combining binding and currying gives you a way to execute any function, in any context, and
with any arguments.
615