Understanding Dean Edwards' addevent JavaScript

问题

I need help understanding this piece of code. What is the point of handler.guid? Why is there a need for a hash table?

What is the point of:

if ( element["on" + type])
  {
  handlers[0] = element["on" + type];
  }

What does the "this" refer to in handleEvent, the element or the the addEvent function?

function addEvent(element, type, handler) 
  {
  // 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) 
  {
  // grab the event object (IE uses a global event object)
  event = event || 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];
    this.$$handleEvent(event);
    }
  }

回答1:

The guid is used to give each event a unique index, while the hash table is used to implement a dynamic dispatch table. this.$$handleEvent refers to the element in the handler mapping table.

A callback system works by storing event handlers in an array. When the underlying event is detected the dispatch system loops through the array calling the callback functions in turn.

The jQuery Event object uses a similar structure.

References