cycling jQuery_Succinctly | Page 74

Notes: There is no limit to the depth or number of namespaces used— e.g. resize.layout.headerFooterContent. Namespacing is a great way of protecting, invoking, removing any exclusive handlers that a plugin may require. Namespacing works with custom events as well as standard events—e.g. click.unique or myclick.unique. Grokking event delegation Event delegation relies on event propagation (a.k.a. bubbling). When you click an inside of a

, which is inside of a

, the click event bubbles up the DOM from the to the
• to the
  and so on, until each ancestor element with a function assigned to an event handler fires. This means if we attach a click event to a
  and then click an that is encapsulated inside of the
  , eventually the click handler attached to the
  , because of bubbling, will be invoked. When it is invoked, we can use the event object (event.target) to identify which element in the DOM actually caused the event bubbling to begin. Again, this will give us a reference to the element that started the bubbling. By doing this, we can seemly add an event handler to a great deal of DOM elements using only a single event handler/declaration. This is extremely useful; for example, a table with 500 rows where each row requires a click event can take advantage of event delegation. Examine the code below for clarification. Sample: sample70.html
  • remove
  • remove
  • remove
  • remove
  • remove
  • remove