Some help with "Dean Edwards addEvent and removeEvent" please.

[MarcMiller]

Hi
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
Marc

// 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;
};

[Kravvitz]

1) Why is the "handler" parameter for addEvent() missing letters so it's now "and"?

2) In JavaScript, the "$" doesn't have any special significance. I think Dean just used it like that to make it stand out and make sure there wouldn't be any variable name conflicts.

3) If you go to the URL included in the code you posted you can see a commented version of the script. Also be sure to check out the follow up blog post.

4) Sure, you can use it for any amount of event handling. By using it you ensure that you can have multiple event handlers for the same event on a single element.

5)

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?

The first parameter is an element reference, not tagName of an element. You can get element references with DOM methods like document.getElementById().

The second parameter is a string with the name of the type of event without the "on" prefix, e.g. "click" and "mouseover".

The third parameter is a reference to a function that will be called when the event is triggered.

[MarcMiller]

So on that third parameter is the reference to a function written like "doSomething ()" or "doSomething(parameter1)"?

[Kravvitz]

Not quite. The parentheses there make it a function call, not a function reference. Simply pass the name and only the name.

Here's an example call. We're assuming that there is an element with an ID "ex1" somewhere in the page.

function doSomehting() {
  alert('hi');
}
addEvent(document.getElementById('ex1'), 'click', doSomething);

[MarcMiller]

So if you do it like that, how do you pass this doSomething function a parameter should it require it?

[kyberfabrikken]

So if you do it like that, how do you pass this doSomething function a parameter should it require it?

Create a new function closure for that:

function doSomehting(message) {
  alert(message);
}
addEvent(document.getElementById('ex1'), 'click', function() {
  doSomething(foo);
});

[MarcMiller]

function() { doSomething(foo);}

so that's a reference! Thanks

[MarcMiller]

2) In JavaScript, the "$" doesn't have any special significance. I think Dean just used it like that to make it stand out and make sure there wouldn't be any variable name conflicts.

I have just thought of another question in regards to Kravvitz answer in the above. Just to reiterate Kravvitz is answering me in regard to the code marked an orange in the first posting on this thread. He is saying that the $ has no special significance in JavaScript and I am taking it also to mean that the entire "$$guid" which seems to mean, to me, a gated test is taking place to see if no property called "$$guid" exists on "handler". Is this interpretation correct? And if so is this test probably not necessary? Also on that same line there is guid++ I am not familiar with that syntax but in my mind of ++ seems to denote iteration. However this line marked an orange in the code in the first posting of this thread is not in a loop and to me that means there is no iteration. So where can I go to become more familiar with the syntax of the ending of this line. Or just explain it here if that is not too graded task?

Sincerely
Marc

[Kravvitz]

function() { doSomething(foo);}

so that's a reference! Thanks

No, that's an anonymous function. Passing it as an argument to a function makes it act like a function reference.

I am taking it also to mean that the entire "$$guid" which seems to mean, to me, a gated test is taking place to see if no property called "$$guid" exists on "handler". Is this interpretation correct? And if so is this test probably not necessary?

It gives each handler a unique ID. It's used to make sure that you don't overwrite an existing ID.The test is necessary. It's part of the system to prevent the exact same event handler from being attached multiple times.

Also on that same line there is guid++ I am not familiar with that syntax but in my mind of ++ seems to denote iteration.

++ is the post-increment operator. The variable is evaluated and then incremented. Any discussion of JavaScript operators should cover it.

http://www.javascriptkit.com/jsref/operators.shtml
http://www.devguru.com/Technologies/...operators.html