Posted By

wizard04 on 07/17/08


Tagged

javascript event handler


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

SpinZ
rafael
wirenaught


Event Handling Functions


 / Published in: JavaScript
 

Events.add(element, type, handler) adds a handler to an element Events.remove(element, type, handler) removes a handler from an element Events.getTarget(event) or Events.getOrigin(event) returns the element from which the event originated

  1. //This is based almost entirely on Dean Edwards' code, along with modifications suggested by others in the
  2. // comments of his article.
  3. //I also added flushEvents() and getTarget(), and associated everything with an Events object.
  4.  
  5. //written by Dean Edwards, 2005
  6. //with input from Tino Zijdel, Diego Perini, Matthias Miller
  7. //http://dean.edwards.name/weblog/2005/10/add-event/
  8. //http://therealcrisp.xs4all.nl/upload/addEvent_dean.html
  9. //http://dean.edwards.name/weblog/2005/10/add-event2/#comment6264
  10. //http://dean.edwards.name/weblog/2005/10/add-event2/#comment78683
  11.  
  12. var Events = function()
  13. {
  14. //***** private properties and methods *****//
  15.  
  16. var undefined;
  17.  
  18. function addEvent(element, type, handler)
  19. {
  20. if(element.addEventListener)
  21. {
  22. element.addEventListener(type, handler, false);
  23. }
  24. else
  25. {
  26. //assign each event handler a unique ID
  27. if(!handler.$$guid) handler.$$guid = addEvent.guid++;
  28. //create a hash table of event types for the element
  29. if(!element.$$events) element.$$events = {};
  30. //create a hash table of event handlers for each element/event pair
  31. var handlers = element.$$events[type];
  32. if(!handlers)
  33. {
  34. handlers = element.$$events[type] = {};
  35. //store the existing event handler (if there is one)
  36. if(element["on" + type])
  37. {
  38. handlers[0] = element["on" + type];
  39. }
  40. //assign a global event handler to do all the work
  41. element["on" + type] = handleEvent;
  42. }
  43. //store the event handler in the hash table
  44. handlers[handler.$$guid] = handler;
  45. }
  46. }
  47. addEvent.guid = 1; //a counter used to create unique IDs for handlers
  48.  
  49. function removeEvent(element, type, handler)
  50. {
  51. if(element.removeEventListener)
  52. {
  53. element.removeEventListener(type, handler, false);
  54. }
  55. else if(element.$$events && element.$$events[type] && handler.$$guid)
  56. {
  57. //remove the event handler from the hash table
  58. delete element.$$events[type][handler.$$guid];
  59. }
  60. }
  61.  
  62. //returns the target of an event (make sure to pass the correct event object)
  63. function getTarget(event)
  64. {
  65. if(!event) return null;
  66. var target = event.target || event.srcElement || null;
  67. if(target && target.nodeType == 3) target = target.parentNode; //it's a text node; defeat Safari bug
  68. return target;
  69. };
  70.  
  71. //***helper functions***//
  72.  
  73. function handleEvent(event)
  74. {
  75. var returnValue = true;
  76. //grab the event object (IE uses a global event object)
  77. //.parentWindow part is for dealing with multiple windows/frames in IE
  78. event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
  79. //get a reference to the hash table of event handlers
  80. var handlers = this.$$events[event.type];
  81. //execute each event handler
  82. for(var i in handlers)
  83. {
  84. //make sure this item is not an inherited property/method
  85. if(!Object.prototype[i])
  86. {
  87. //make the handler a method of the element so the value of `this` will be correct
  88. this.$$handler = handlers[i];
  89. if(this.$$handler(event) === false)
  90. {
  91. event.preventDefault();
  92. returnValue = false;
  93. }
  94. }
  95. }
  96. //`delete` operator doesn't work for DOM elements in IE
  97. try{ delete this.$$handler; }
  98. catch(e){ this.$$handler = undefined; }
  99. return returnValue;
  100. }
  101.  
  102. function fixEvent(event)
  103. {
  104. //add W3C standard event methods
  105. event.preventDefault = fixEvent.preventDefault;
  106. event.stopPropagation = fixEvent.stopPropagation;
  107. return event;
  108. }
  109. fixEvent.preventDefault = function(){ this.returnValue = false; };
  110. fixEvent.stopPropagation = function(){ this.cancelBubble = true; };
  111.  
  112. //removes all event handlers from the DOM that were added using the custom solution
  113. function flushEvents()
  114. {
  115. var elems = document.getElementsByTagName("*");
  116. for(var i=0; i<elems.length; i++)
  117. {
  118. //`delete` operator doesn't work for DOM elements in IE 6 & 7
  119. try{ delete elems[i].$$events; }
  120. catch(e){ elems[i].$$events = undefined; }
  121. }
  122. }
  123.  
  124. //***** initialization *****//
  125.  
  126. //to avoid memory leaks in IE when the page unloads
  127. if(!window.removeEventListener) addEvent(window, 'unload', flushEvents);
  128.  
  129. //***** public properties and methods *****//
  130.  
  131. return {
  132. add: addEvent,
  133. remove: removeEvent,
  134. getTarget: getTarget,
  135. getOrigin: getTarget
  136. };
  137. }(); //initialize Events object

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wizard04 on September 21, 2009

Updated.

handleEvent now executes all handlers instead of stopping when one returns false. If one DOES return false, it will make sure that event.preventDefault() is called.

Posted By: wizard04 on April 16, 2014

The latest: https://github.com/wizard04wsu/Events_Max

You need to login to post a comment.