We have discussed "javascript - trick to fix event object" and "javascript - trick to centralized store". with this two, we can build from and create a new set of addEvent and removeEvent methods (also some other methods inlcude triggerEvent and etc..) which are essential set of methods that we can have for handlers management.
Since we cannot include one js file from another js file, (there are methods, however, it does not worth that complication in order to achieve that ).
first, let see the code that levergage event fixing and centralized store and then provided the method of addEvent and removeEvent .
/************************************** *@Name: addremoveevents.js * the code of the centralobjectsstore.js, which has the central data store, together with the fixevents.js ,which contains the method that simulat the DOM events. * with the data store we can create new set of addEvent and removeEvent methods that work closer to our desired outcome in all browsers, as seen in List 13 - 4 *@Summary * * @todo: * Test ***************************************/ /** * below is the code of centralizedatastore.js */ (function () { var cache = {}, guid = 1, expando = "data" + (new Date).getTime(); this.getData = function (elem) { var id = elem[expando]; if (!id) { id = elem[expando] = guid++; cache[id] = {}; } return cache[id]; }; this.removeData = function (elem) { var id = elem[expando]; if (!id) { return; } // Remove all stored data delete cache[id]; // Remove the expando property from the DOM node try { delete elem[expando]; } catch (e) { if (elem.removeAttribute) { elem.removeAttribute(expando); } } }; })(); /** * below is the code of fixEvent.js */ function fixEvent(event) { if (!event || !event.stopPropagation) { alert("inside fixing event"); var old = event || window.event; // Clone the old object so that we can modify the values event = {}; for (var prop in old) { event[prop] = old[prop]; } // The event occurred on this element if (!event.target) { event.target = event.srcElement || document; } // Handle which other element the event is related to event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement; // Stop the default browser action event.preventDefault = function () { event.returnValue = false; event.isDefaultPrevented = returnTrue; }; event.isDefaultPrevented = returnFalse; // Stop the event from bubbling event.stopPropagation = function () { event.cancelBubble = true; event.isPropagationStopped = returnTrue; }; event.isPropagationStopped = returnFalse; // Stop the event from bubbling and executing other handlers event.stopImmediatePropagation = function () { this.isImmediatePropagationStopped = returnTrue; this.stopPropagation(); }; event.isImmediatePropagationStopped = returnFalse; // Handle mouse position if (event.clientX != null) { var doc = document.documentElement, body = document.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); } // Handle key presses event.which = event.charCode || event.keyCode; // Fix button for mouse clicks: // 0 == left; 1 == middle; 2 == right if (event.button != null) { event.button = (event.button & 1 ? 0 : (event.button & 4 ? 1 : (event.button & 2 ? 2 : 0))); } } return event; // move the following code from the end of function // fixEvent(event) function returnTrue() { return true; } function returnFalse() { return false; } } (function () { var guid = 1; this.addEvent = function (elem, type, fn) { var data = getData(elem), handlers; // We only need to generate one handler per element if (!data.handler) { // Our new meta-handler that fixes // the event object and the context data.handler = function (event) { // - the event is given the value when the actual event is fired. event = fixEvent(event); var handlers = getData(elem).events[event.type]; // Go through and call all the real bound handlers for (var i = 0, l = handlers.length; i < l; i++) { handlers[i].call(elem, event); // Stop executing handlers since the user requested it if (event.isImmediatePropagationStopped()) { break; } } }; } // We need a place to store all our event data if (!data.events) { data.events = {}; } // And a place to store the handlers for this event type handlers = data.events[type]; if (!handlers) { handlers = data.events[type] = []; // Attach our meta-handler to the element, // since one doesn't exist if (document.addEventListener) { elem.addEventListener(type, data.handler, false); } else if (document.attachEvent) { elem.attachEvent("on" + type, data.handler); } } if (!fn.guid) { fn.guid = guid++; } handlers.push(fn); }; this.removeEvent = function (elem, type, fn) { var data = getData(elem), handlers; // If no events exist, nothing to unbind if (!data.events) { return } // Are we removing all bound events? if (!type) { for (type in data.events) { cleanUpEvents(elem, type); } return; } // And a place to store the handlers for this event type handlers = data.events[type]; // If nohandlers exist, nothing to unbind if (!handlers) { return; } // See if we're only removing a single handler if (fn && fn.guid) { for (var i = 0; i < handlers.length; i++) { // We found a match // (don't stop here, there could be a couple bound) if (handlers[i].guid === fn.guid) { // Remove the handler from the array of handlers handlers.splice(i--, 1); } } } cleanUpEvents(elem, type); }; // A simple method for changing the context of a function this.proxy = function (context, fn) { // Make sure the function has a unique ID if (!fn.guid) { fn.guid = guid++; } // Create the new function that changes the context var ret = function () { return fn.apply(context, arguments); }; // Give the new function the same ID // (so that they are equivalent and can be easily removed) ret.guid = fn.guid; return ret; }; function cleanUpEvents(elem, type) { var data = getData(elem); // Remove the events of a particular type if there are none left if (data.events[type].length === 0) { delete data.events[type]; // Remove the meta-handler from the element if (document.removeEventListener) { elem.removeEventListener(type, data.handler, false); } else if (document.detachEvent) { elem.detachEvent("on" + type, data.handler); } } // Remove the events object if there are no types left if (isEmpty(data.events)) { delete data.events; delete data.handler; } // Finally remove the expando if there is no data left if (isEmpty(data)) { removeData(elem); } } function isEmpty(object) { for (var prop in object) { return false; } return true; } })(); function triggerEvent(elem, event) { var handler = getData(elem).handler, parent = elem.parentNode || elem.ownerDocument; if (typeof event === 'string') { event = { type: event, target: elem }; } if (handler) { handler.call(elem, event); } // Bubble the event up the tree to the document, // Unless it's been explicitly stopped if (parent && !event.isPropagationStopped()) { triggerEvent(parent, event); // We're at the top document so trigger the default action } else if (!parent && !event.isDefaultPrevented()) { var targetData = getData(event.target), targetHandler = targetData.handler; // so if there is handler to the defalt handler , we execute it if (event.target[event.type]) { // I Suppose that it is the event.type rather than just the type // Temporarily disable the bound handler, // don't want to execute it twice if (targetHandler) { targetData.handler = function () { }; } // Trigger the native event (click, focus, blur) event.target[event.type](); // I suppose that it is the event.type rather than the type // restore the handler if (targetHandler) { targetData.handler = targetHandler; } } } }
the code above also has a triggerEvent method, which we might come back later.
so some of the comment.
we are storing all incoming handlers in a central data store (the event types are within the 'event' property and each event type stores an array of all the handlers that are bound), instead of binding directly the handler to the element. we use array because it allows to bind more than one handler and also it it will allow execution in the order.
the method stopImmediatePropagation provide a means for one handler to stop the handlers that follows it.
we then bind a generic handler to the element, the handler will then execute the bound handlers in the array in order . We only need to generate one of these handlers per element (since we capture the element via a closure which then use to look up the event data and correct the handler contexts -- this is about the fixEvent call).
While the handler comes in we also give it a unique ID. This isn't explicitly required in order to be able to remove the handler later. though we can compare the function, the id way has one advantage in that you can create a nice proxy function for chaning the context of the handler.
Below show you how to use the proxy method. (need further verify)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="addremoveevents.js"></script>
<script type="text/javascript">
var obj = {
count: 0,
method: function () {
this.count++;
}
};
addEvent(window, "load", function () {
// Attach the handler while enforcing the context to 'obj'
addEvent(document.body, "click", proxy(obj, obj.method));
// Remove on right click
addEvent(document.body, "click", function (e) {
if (e.button === 3) {
// Note that we can remove the obj.method handler no problem
removeEvent(document.body, "click", obj.method);
}
});
});
</script>
</head>
<body>
Hello world
</body>
</html>
about the remove method. It is capable of removing a single event handler, but it is also possible to remove all handlers of a particular type or even all events bound to the element.
// Remove all bound events from the body removeEvent( document.body ); // Remove all click events from the body removeEvent( document.body, "click" ); // Remove a single function from the body removeEvent( document.body, "click", someFn );
The important aspect behind removeEvent is in making sure that we clean up all our event handlers,
data store, and meta-handler properly.
Most of the logic for handling that is contained within the cleanUpEvents function. This function makes sure to systematically go through the element's data store and clean up any loose ends - eventually removing the meta-handler from the element itself if all handlers of a particular type have been removed from the element.
Below is the code that I used to test the handlers management.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="addremoveevents.js"></script>
<script type="text/javascript">
addEvent(window, "load", function () {
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
(function (elem) {
// joe's note, it is the same if you have the 'function handlers'
// or you simply have the 'function'
addEvent(elem, "click", function (e) {
// only do this on left click
if (e.button === 0) { // the book has the value of e.button === 1
this.style.backgroundColor = "green";
removeEvent(elem, "click", handler);
}
});
})(li[i]);
}
}
);
</script>
</head>
<body>
<ul>
<li>Click</li>
<li>me</li>
<li>once.</li>
</ul>
</body>
</html>
There are three elements, if you click on one of them, the background of the element will turns green.