I've been reading the book "Pro.JavaScript.Techniques by John Resig". In particular I've been reading the chapter on Events and the author highly recommends using "Dean Edwards addEvent and removeEvent" functions in your JavaScript coding. I have some questions which he doesn't answer about these functions . To start with one will it be appropriate to use these functions with one use it with something as simple as changing the background color of an element with a onmousemove event? And in the function code shown below, which is a copy of the listing in the book, one sees we pass three parameters to these addEvent and removeEvent functions. I assume the parameter label element just gets the name of the HTML element like "body", and an "A" for an anchor tag and so on. And I assume further one fills in the parameter label to handler with something like onmousemove or onclick, but what of that type parameter what goes in there?

I am also having trouble understanding the code. I know I will have to pursue understanding this code for a while, but perhaps you can help me with the very first line which I am having trouble understanding. This line is marked in Orange in the code below. This line of code includes twice what appears to be a property name "$$guid" what is the significance of the double dollar signs if any and what is the significance of the word guid is the full name of this property just "$$guid" or do those parts have some significance? Can you also tell me the same for "guid++"?

Any help would of course be greatly appreciated

// addEvent/removeEvent written by Dean Edwards, 2005
// with input from Tino Zijdel
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, and) {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;  
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;

// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];

function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(window.event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
return returnValue;

// Add some "missing" methods to IE's event object
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;

fixEvent.preventDefault = function() {
this.returnValue = false;

fixEvent.stopPropagation = function() {
this.cancelBubble = true;