Event Handling Functions


/ Published in: JavaScript
Save to your folder(s)

`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


Copy this code and paste it in your HTML
  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

You need to login to post a comment.