SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
-
Mar 29, 2007, 01:38 #1
- Join Date
- Oct 2006
- Posts
- 153
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Some help with "Dean Edwards addEvent and removeEvent" please.
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
Code:// 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; };
-
Mar 29, 2007, 02:45 #2
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 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.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 29, 2007, 03:08 #3
- Join Date
- Oct 2006
- Posts
- 153
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
So on that third parameter is the reference to a function written like "doSomething ()" or "doSomething(parameter1)"?
-
Mar 29, 2007, 03:12 #4
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Code:function doSomehting() { alert('hi'); } addEvent(document.getElementById('ex1'), 'click', doSomething);
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 29, 2007, 04:00 #5
- Join Date
- Oct 2006
- Posts
- 153
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
So if you do it like that, how do you pass this doSomething function a parameter should it require it?
-
Mar 29, 2007, 05:05 #6
- Join Date
- Jun 2004
- Location
- Copenhagen, Denmark
- Posts
- 6,157
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 29, 2007, 12:06 #7
- Join Date
- Oct 2006
- Posts
- 153
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
function() { doSomething(foo);}Last edited by MarcMiller; Mar 29, 2007 at 19:03.
-
Mar 29, 2007, 19:01 #8
- Join Date
- Oct 2006
- Posts
- 153
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Sincerely
Marc
-
Mar 29, 2007, 19:28 #9
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
Also on that same line there is guid++ I am not familiar with that syntax but in my mind of ++ seems to denote iteration.
http://www.javascriptkit.com/jsref/operators.shtml
http://www.devguru.com/Technologies/...operators.htmlWe miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
Bookmarks