SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    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;
    };

  2. #2
    CSS & JS/DOM Adept bronze trophy
    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 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.
    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.

  3. #3
    SitePoint Zealot
    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)"?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    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.

  5. #5
    SitePoint Zealot
    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?

  6. #6
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarcMiller View Post
    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:
    Code:
    function doSomehting(message) {
      alert(message);
    }
    addEvent(document.getElementById('ex1'), 'click', function() {
      doSomething(foo);
    });

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function() { doSomething(foo);}
    so that's a reference! Thanks
    Last edited by MarcMiller; Mar 29, 2007 at 19:03.

  8. #8
    SitePoint Zealot
    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.
    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

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MarcMiller View Post
    Code:
    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
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •