开发者

Understanding Dean Edwards' addevent JavaScript

开发者 https://www.devze.com 2023-01-22 01:24 出处:网络
I need help understanding this piece of code. What is the point of handler.guid?Why is therea need for a hash table?

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];

  // e开发者_高级运维xecute each event handler
  for (var i in handlers) 
    {
    this.$$handleEvent = handlers[i];
    this.$$handleEvent(event);
    }
  }


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

  • A Few Words on GUIDs
  • When Should I Use a Dispatch Table
  • Delegating All of the Things With Ruby Forwardable - Words and Code
  • The Gang of Four is wrong and you don't understand delegation — Saturn Flyer
  • GUIDs and UUIDs
  • RFC 4122: A Universally Unique IDentifier (UUID) URN Namespace
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号