Event propagation in Javascript

by

events almost always bubble up unless event.cancelBubble=true is set or event.stopPropagation() is used. You are only aware of it, though, when one of your event
handlers gets tripped.

See http://en.wikipedia.org/wiki/DOM_events for a list of events which bubble. (Note: in the table of HTML events, cancelable refers to the effectiveness of event.preventDefault() or return false to cancel the default action, not bubbling)

Also see http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow, in particular 1.2.1 Basic Flow to understand the capture phase and bubbling phase of event propagation.

EDIT

http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event-delegation-and-bubbling suggests there is a performance gain by stopping propagation but provides no data.

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/a9af0aa4216a8046 suggests that browsers should be optimized for bubbling behaviour and says there should be no significant performance difference. Again no data.

http://developer.yahoo.com/performance/rules.html#events provides a good technique for improving event-handling performance, but doesn’t directly talk about stopPropagation performance.

Ultimately, you’d have to profile the difference to get a good idea of the benefits on your site.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. How do I attach events to dynamic HTML elements with jQuery? [duplicate]
  3. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  4. How to set file input value when dropping file on page? [duplicate]
  5. Detecting Browser Autofill
  6. Firing event on DOM attribute change
  7. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  8. Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser
  9. How can I listen for a click-and-hold in jQuery?
  10. prevent Scroll bubbling from element to window
  11. Get index of clicked element in collection with jQuery
  12. Listening for Youtube Event in JavaScript or jQuery
  13. Throttle event calls in jQuery
  14. JavaScript: DOM load events, execution sequence, and $(document).ready()
  15. How do you detect the clearing of a “search” HTML5 input?
  16. JS Events: hooking on value change event on text inputs
  17. How can I get jQuery .val() AFTER keypress event?
  18. jQuery events .load(), .ready(), .unload()
  19. Get the clicked object that triggered jquery blur() event [duplicate]
  20. How to know if .keyup() is a character key (jQuery)
  21. How do I handle a click anywhere in the page, even when a certain element stops the propagation?
  22. Prevent onclick action with jQuery
  23. jQuery – How can I temporarily disable the onclick event listener after the event has been fired?
  24. How to disable mouseout events triggered by child elements?
  25. jquery/javascript: function(e){…. what is e? why is it needed? what does it actually do/accomplish?
  26. Prototype equivalent for jQuery live function
  27. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  28. Fire oninput event with jQuery
  29. addEventListener to iFrame
  30. How to capture browser close event?

Leave a Comment