What is DOM Event delegation

Question

Can anyone please explain event delegation in JavaScript and how is it useful

User · Answer

Event Delegation  Attach an event listener to a parent element that fires when an event occurs on a child element   Event Propagation  When an event moves through the DOM from child to a parent element  that s called Event Propagation  because the event propagates  or moves through the DOM   In this example  an event  onclick  from a button gets passed to the parent paragraph    x000D   x000D    document  ready function     x000D   x000D          spoiler span   hide    x000D   x000D         add event onclick on parent   spoiler  and delegate its event to child  button     x000D          spoiler   on   click    button   function     x000D       x000D              spoiler button   hide        x000D       x000D              spoiler span   show    x000D       x000D           x000D   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p class  spoiler  gt  x000D       lt span gt Hello World lt  span gt  x000D       lt button gt Click Me lt  button gt  x000D   lt  p gt  x000D   x000D   x000D    Codepen

User · Answer

Event delegation is handling an event that bubbles using an event handler on a container element  but only activating the event handler s behavior if the event happened on an element within the container that matches a given condition  This can simplify handling events on elements within the container   For instance  suppose you want to handle a click on any table cell in a big table  You could write a loop to hook up a click handler to each cell   or you could hook up a click handler on the table and use event delegation to trigger it only for table cells  and not table headers  or the whitespace within a row around cells  etc     It s also useful when you re going to be adding and removing elements from the container  because you don t have to worry about adding and removing event handlers on those elements  just hook the event on the container and handle the event when it bubbles   Here s a simple example  it s intentionally verbose to allow for inline explanation   Handling a click on any td element in a container table    x000D   x000D     Handle the event on the container x000D  document getElementById  container   addEventListener  click   function event    x000D         Find out if the event targeted or bubbled through a  td  en route to this container element x000D      var element   event target  x000D      var target  x000D      while  element  amp  amp   target    x000D          if  element matches  td      x000D                 Found a  td  within the container  x000D              target   element  x000D            else   x000D                 Not found x000D              if  element     this    x000D                     We ve reached the container  stop x000D                  element   null  x000D                else   x000D                     Go to the next parent in the ancestry x000D                  element   element parentNode  x000D                x000D            x000D        x000D      if  target    x000D          console log  You clicked a td      target textContent   x000D        else   x000D          console log  That wasn t a td in the container table    x000D        x000D      x000D  table   x000D      border-collapse  collapse  x000D      border  1px solid  ddd  x000D    x000D  th  td   x000D      padding  4px  x000D      border  1px solid  ddd  x000D      font-weight  normal  x000D    x000D  th rowheader   x000D      text-align  left  x000D    x000D  td   x000D      cursor  pointer  x000D    x000D   lt table id  container  gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th gt Language lt  th gt  x000D               lt th gt 1 lt  th gt  x000D               lt th gt 2 lt  th gt  x000D               lt th gt 3 lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt th class  rowheader  gt English lt  th gt  x000D               lt td gt one lt  td gt  x000D               lt td gt two lt  td gt  x000D               lt td gt three lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th class  rowheader  gt Espa  ol lt  th gt  x000D               lt td gt uno lt  td gt  x000D               lt td gt dos lt  td gt  x000D               lt td gt tres lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th class  rowheader  gt Italiano lt  th gt  x000D               lt td gt uno lt  td gt  x000D               lt td gt due lt  td gt  x000D               lt td gt tre lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    Before going into the details of that  let s remind ourselves how DOM events work   DOM events are dispatched from the document to the target element  the capturing phase   and then bubble from the target element back to the document  the bubbling phase   This graphic in the old DOM3 events spec  now superceded  but the graphic s still valid  shows it really well     Not all events bubble  but most do  including click   The comments in the code example above describe how it works  matches checks to see if an element matches a CSS selector  but of course you can check for whether something matches your criteria in other ways if you don t want to use a CSS selector   That code is written to call out the individual steps verbosely  but on vaguely-modern browsers  and also on IE if you use a polyfill   you can use closest and contains instead of the loop   var target   event target closest  td        console log  You clicked a td      target textContent     else       console log  That wasn t a td in the container table        Live Example    x000D   x000D     Handle the event on the container x000D  document getElementById  container   addEventListener  click   function event    x000D      var target   event target closest  td    x000D      if  target  amp  amp  this contains target     x000D          console log  You clicked a td      target textContent   x000D        else   x000D          console log  That wasn t a td in the container table    x000D        x000D      x000D  table   x000D      border-collapse  collapse  x000D      border  1px solid  ddd  x000D    x000D  th  td   x000D      padding  4px  x000D      border  1px solid  ddd  x000D      font-weight  normal  x000D    x000D  th rowheader   x000D      text-align  left  x000D    x000D  td   x000D      cursor  pointer  x000D    x000D   lt table id  container  gt  x000D       lt thead gt  x000D           lt tr gt  x000D               lt th gt Language lt  th gt  x000D               lt th gt 1 lt  th gt  x000D               lt th gt 2 lt  th gt  x000D               lt th gt 3 lt  th gt  x000D           lt  tr gt  x000D       lt  thead gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt th class  rowheader  gt English lt  th gt  x000D               lt td gt one lt  td gt  x000D               lt td gt two lt  td gt  x000D               lt td gt three lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th class  rowheader  gt Espa  ol lt  th gt  x000D               lt td gt uno lt  td gt  x000D               lt td gt dos lt  td gt  x000D               lt td gt tres lt  td gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt th class  rowheader  gt Italiano lt  th gt  x000D               lt td gt uno lt  td gt  x000D               lt td gt due lt  td gt  x000D               lt td gt tre lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    closest checks the element you call it on to see if it matches the given CSS selector and  if it does  returns that same element  if not  it checks the parent element to see if it matches  and returns the parent if so  if not  it checks the parent s parent  etc  So it finds the  closest  element in the ancestor list that matches the selector  Since that might go past the container element  the code above uses contains to check that if a matching element was found  it s within the container nbsp  mdash  since by hooking the event on the container  you ve indicated you only want to handle elements within that container   Going back to our table example  that means that if you have a table within a table cell  it won t match the table cell containing the table    x000D   x000D     Handle the event on the container x000D  document getElementById  container   addEventListener  click   function event    x000D      var target   event target closest  td    x000D      if  target  amp  amp  this contains target     x000D          console log  You clicked a td      target textContent   x000D        else   x000D          console log  That wasn t a td in the container table    x000D        x000D      x000D  table   x000D      border-collapse  collapse  x000D      border  1px solid  ddd  x000D    x000D  th  td   x000D      padding  4px  x000D      border  1px solid  ddd  x000D      font-weight  normal  x000D    x000D  th rowheader   x000D      text-align  left  x000D    x000D  td   x000D      cursor  pointer  x000D    x000D   lt  -- The table wrapped around the  container table -- gt  x000D   lt table gt  x000D       lt tbody gt  x000D           lt tr gt  x000D               lt td gt  x000D                   lt  -- This cell doesn t get matched  thanks to the  this contains target   check -- gt  x000D                   lt table id  container  gt  x000D                       lt thead gt  x000D                           lt tr gt  x000D                               lt th gt Language lt  th gt  x000D                               lt th gt 1 lt  th gt  x000D                               lt th gt 2 lt  th gt  x000D                               lt th gt 3 lt  th gt  x000D                           lt  tr gt  x000D                       lt  thead gt  x000D                       lt tbody gt  x000D                           lt tr gt  x000D                               lt th class  rowheader  gt English lt  th gt  x000D                               lt td gt one lt  td gt  x000D                               lt td gt two lt  td gt  x000D                               lt td gt three lt  td gt  x000D                           lt  tr gt  x000D                           lt tr gt  x000D                               lt th class  rowheader  gt Espa  ol lt  th gt  x000D                               lt td gt uno lt  td gt  x000D                               lt td gt dos lt  td gt  x000D                               lt td gt tres lt  td gt  x000D                           lt  tr gt  x000D                           lt tr gt  x000D                               lt th class  rowheader  gt Italiano lt  th gt  x000D                               lt td gt uno lt  td gt  x000D                               lt td gt due lt  td gt  x000D                               lt td gt tre lt  td gt  x000D                           lt  tr gt  x000D                       lt  tbody gt  x000D                   lt  table gt  x000D               lt  td gt  x000D               lt td gt  x000D                  This is next to the container table x000D               lt  td gt  x000D           lt  tr gt  x000D       lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

dom event delegation is something different from the computer science definition   It refers to handling bubbling events from many elements  like table cells  from a parent object  like the table  It can keep the code simpler  especially when adding or removing elements  and saves some memory

User · Answer

Event delegation allows you to avoid adding event listeners to specific nodes   instead  the event listener is added to one parent   That event listener analyzes bubbled events to find a match on child elements  JavaScript Example   Let s say that we have a parent UL element with several child elements   lt ul id  quot parent-list quot  gt     lt li id  quot post-1 quot  gt Item 1 lt  li gt     lt li id  quot post-2 quot  gt Item 2 lt  li gt     lt li id  quot post-3 quot  gt Item 3 lt  li gt     lt li id  quot post-4 quot  gt Item 4 lt  li gt     lt li id  quot post-5 quot  gt Item 5 lt  li gt     lt li id  quot post-6 quot  gt Item 6 lt  li gt   lt  ul gt   Let s also say that something needs to happen when each child element is clicked   You could add a separate event listener to each individual LI element  but what if LI elements are frequently added and removed from the list   Adding and removing event listeners would be a nightmare  especially if addition and removal code is in different places within your app   The better solution is to add an event listener to the parent UL element   But if you add the event listener to the parent  how will you know which element was clicked  Simple   when the event bubbles up to the UL element  you check the event object s target property to gain a reference to the actual clicked node   Here s a very basic JavaScript snippet which illustrates event delegation     Get the element  add a click listener    document getElementById  quot parent-list quot   addEventListener  quot click quot   function e         e target is the clicked element       If it was a list item   if e target  amp  amp  e target nodeName     quot LI quot            List item found   Output the ID      console log  quot List item  quot   e target id replace  quot post- quot     quot  was clicked  quot              Start by adding a click event listener to the parent element   When the event listener is triggered  check the event element to ensure it s the type of element to react to   If it is an LI element  boom   we have what we need   If it s not an element that we want  the event can be ignored   This example is pretty simple -- UL and LI is a straight-forward comparison   Let s try something more difficult   Let s have a parent DIV with many children but all we care about is an A tag with the classA CSS class     Get the parent DIV  add click listener    document getElementById  quot myDiv quot   addEventListener  quot click quot  function e       e target was the clicked element   if e target  amp  amp  e target nodeName     quot A quot            Get the CSS classes     var classes   e target className split  quot   quot           Search for the CSS class      if classes               For every CSS class the element has            for var x   0  x  lt  classes length  x                     If it has the CSS class we want                if classes x      quot classA quot                        Bingo                  console log  quot Anchor element clicked  quot                       Now do something here                                            http   davidwalsh name event-delegate

User · Answer

DOM event delegation is a mechanism of responding to ui-events via a single common parent rather than each child  through the magic of event  bubbling   aka event propagation    When an event is triggered on an element  the following occurs      The event is dispatched to its target   EventTarget and any event listeners   found there are triggered  Bubbling   events will then trigger any   additional event listeners found by   following the EventTarget s parent   chain upward  checking for any event   listeners registered on each   successive EventTarget  This upward   propagation will continue up to and   including the Document    Event bubbling provides the foundation for event delegation in browsers  Now you can bind an event handler to a single parent element  and that handler will get executed whenever the event occurs on any of its child nodes  and any of their children in turn   This is event delegation  Here s an example of it in practice    lt ul onclick  alert event type         gt       lt li gt One lt  li gt       lt li gt Two lt  li gt       lt li gt Three lt  li gt   lt  ul gt    With that example if you were to click on any of the child  lt li gt  nodes  you would see an alert of  click    even though there is no click handler bound to the  lt li gt  you clicked on  If we bound onclick       to each  lt li gt  you would get the same effect   So what s the benefit   Imagine you now have a need to dynamically add new  lt li gt  items to the above list via DOM manipulation   var newLi   document createElement  li    newLi innerHTML    Four   myUL appendChild newLi     Without using event delegation you would have to  rebind  the  onclick  event handler to the new  lt li gt  element  in order for it to act the same way as its siblings  With event delegation you don t need to do anything  Just add the new  lt li gt  to the list and you re done   This is absolutely fantastic for web apps with event handlers bound to many elements  where new elements are dynamically created and or removed in the DOM  With event delegation the number of event bindings can be drastically decreased by moving them to a common parent element  and code that dynamically creates new elements on the fly can be decoupled from the logic of binding their event handlers   Another benefit to event delegation is that the total memory footprint used by event listeners goes down  since the number of event bindings go down   It may not make much of a difference to small pages that unload often  i e  user s navigate to different pages often   But for long-lived applications it can be significant  There are some really difficult-to-track-down situations when elements removed from the DOM still claim memory  i e  they leak   and often this leaked memory is tied to an event binding  With event delegation you re free to destroy child elements without risk of forgetting to  unbind  their event listeners  since the listener is on the ancestor   These types of memory leaks can then be contained  if not eliminated  which is freaking hard to do sometimes  IE I m looking at you    Here are some better concrete code examples of event delegation    How JavaScript Event Delegation Works Event Delegation versus Event Handling jQuery delegate is event delegation   selector specification jQuery on uses event delegation when passed a selector as the 2nd parameter Event delegation without a JavaScript library Closures vs Event delegation  takes a look at the pros of not converting code to use event delegation Interesting approach PPK uncovered for delegating the focus and blur events  which do not bubble

User · Answer

The delegation concept If there are many elements inside one parent  and you want to handle events on them of them - don   t bind handlers to each element  Instead  bind the single handler to their parent  and get the child from event target  This site provides useful info about how to implement event delegation  http   javascript info tutorial event-delegation

User · Answer

Event delegation makes use of two often overlooked features of JavaScript events  event bubbling and the target element When an event is triggered on an element  for example a mouse click on a button  the same event is also triggered on all of that element   s ancestors  This process is known as event bubbling  the event bubbles up from the originating element to the top of the DOM tree   Imagine an HTML table with 10 columns and 100 rows in which you want something to happen when the user clicks on a table cell  For example  I once had to make each cell of a table of that size editable when clicked  Adding event handlers to each of the 1000 cells would be a major performance problem and  potentially  a source of browser-crashing memory leaks  Instead  using event delegation  you would add only one event handler to the table element  intercept the click event and determine which cell was clicked

User · Answer

To understand event delegation first we need to know why and when we actually need or want event delegation   There may be many cases but let s discuss two big use cases for event delegation  1  The first case is when we have an element with lots of child elements that we are interested in  In this case  instead of adding an event handler to all of these child elements  we simply add it to the parent element and then determine on which child element the event was fired    2 The second use case for event delegation is when we want an event handler attached to an element that is not yet in the DOM when our page is loaded  That s  of course  because we cannot add an event handler to something that s not on our page  so in a case of deprecation that we re coding   Suppose you have a list of 0  10  or 100 items in the DOM when you load your page  and more items are waiting in your hand to add in the list  So there is no way to attach an event handler for the future elements or those elements are not added in the DOM yet  and also there may be a lot of items  so it wouldn t be useful to have one event handler attached to each of them   Event Delegation  All right  so in order to talk about event delegation  the first concept that we actually need to talk about is event bubbling   Event bubbling  Event bubbling means that when an event is fired or triggered on some DOM element  for example by clicking on our button here on the bellow image  then the exact same event is also triggered on all of the parent elements     The event is first fired on the button  but then it will also be fired on all the parent elements one at a time  so it will also fire on the paragraph to the  section the main element and actually all the way up in a DOM tree until the HTML element which is the root  So we say that the event bubbles up inside the DOM tree  and that s why it s called bubbling        Target element  The element on which the event was actually first fired called the target element  so the element that caused the event to happen  is called the target element  In our above example here it s  of course  the button that was clicked  The important part is that this target element is stored as a property in the event object  This means that all the parent elements on which the event will also fire will know the target element of the event  so where the event was first fired   That brings us to event delegation because if the event bubbles up in the DOM tree  and if we know where the event was fired then we can simply attach an event handler to a parent element and wait for the event to bubble up  and we can then do whatever we intended to do with our target element  This technique is called event delegation  In this example here  we could simply add the event handler to the main element   All right  so again  event delegation is to not set up the event handler on the original element that we re interested in but to attach it to a parent element and  basically  catch the event there because it bubbles up  We can then act on the element that we re interested in using the target element property   Example  Now lets assume we have two list item in our page  after adding items in those list programmtically we want to delete one or more items from them  Using event delegation tecnique we can achive our ppurpose easily    lt div class  body  gt       lt div class  top  gt        lt  div gt       lt div class  bottom  gt           lt div class  other  gt               lt  -- other bottom elements -- gt           lt  div gt           lt div class  container clearfix  gt               lt div class  income  gt                   lt h2 class  icome  title  gt Income lt  h2 gt                   lt div class  income  list  gt                       lt  -- list items -- gt                   lt  div gt               lt  div gt               lt div class  expenses  gt                   lt h2 class  expenses  title  gt Expenses lt  h2 gt                   lt div class  expenses  list  gt                       lt  -- list items -- gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Adding items in those list   const DOMstrings           type               income  inc               expense  exp                     incomeContainer   income  list           expenseContainer   expenses  list           container   container         var addListItem   function obj  type             create html string with the place holder         var html  element          if type   DOMstrings type income               element   DOMstrings incomeContainer             html     lt div class  item clearfix  id  inc-  obj id   gt               lt div class  item  description  gt   obj descripiton  lt  div gt               lt div class  right clearfix  gt                   lt div class  item  value  gt   obj value  lt  div gt                   lt div class  item  delete  gt                       lt button class  item  delete--btn  gt  lt i class  ion-ios-close-outline  gt  lt  i gt  lt  button gt                   lt  div gt               lt  div gt           lt  div gt            else if  type    DOMstrings type expense               element DOMstrings expenseContainer              html      lt div class  item clearfix  id  exp-  obj id   gt               lt div class  item  description  gt   obj descripiton  lt  div gt               lt div class  right clearfix  gt                   lt div class  item  value  gt   obj value  lt  div gt                   lt div class  item  percentage  gt 21  lt  div gt                   lt div class  item  delete  gt                       lt button class  item  delete--btn  gt  lt i class  ion-ios-close-outline  gt  lt  i gt  lt  button gt                   lt  div gt               lt  div gt           lt  div gt                     var htmlObject   document createElement  div            htmlObject innerHTML html          document querySelector element  insertAdjacentElement  beforeend   htmlObject           Delete items   var ctrlDeleteItem   function event             var itemId   event target parentNode parentNode parentNode parentNode id          var parent   event target parentNode          var splitId  type  ID          while parent id                    parent   parent parentNode                   if parent id               splitId   parent id split  -                type   splitId 0               ID parseInt splitId 1                       deleteItem type  ID           deleteListItem parent id        var deleteItem   function type  id           var ids  index          ids   data allItems type  map function current               return current id                      index   ids indexOf id           if index gt -1               data allItems type  splice index 1                      var deleteListItem   function selectorID           var element   document getElementById selectorID           element parentNode removeChild element

User · Answer

A delegate in C  is similar to a function pointer in C or C    Using a delegate allows the programmer to encapsulate a reference to a method inside a delegate object  The delegate object can then be passed to code which can call the referenced method  without having to know at compile time which method will be invoked    See this link  --  http   www akadia com services dotnet delegates and events html

User · Answer

It s basically how association is made to the element   click applies to the current DOM  while  on  using delegation  will continue to be valid for new elements added to the DOM after event association   Which is better to use  I d say it depends on the case   Example    lt ul id  todo  gt        lt li gt Do 1 lt  li gt        lt li gt Do 2 lt  li gt        lt li gt Do 3 lt  li gt        lt li gt Do 4 lt  li gt   lt  ul gt     Click Event      li   click function             this  remove           Event  on       todo   on  click    li   function             this  remove          Note that I ve separated the selector in the  on  I ll explain why   Let us suppose that after this association  let us do the following       todo   append   lt li gt Do 5 lt  li gt       That is where you will notice the difference   If the event was associated via  click  task 5 will not obey the click event  and so it will not be removed   If it was associated via  on  with the selector separate  it will obey

User · Answer

Delegation is a technique where an object expresses certain behavior to the outside but in reality delegates responsibility for implementing that behaviour to an associated object  This sounds at first very similar to the proxy pattern  but it serves a much different purpose  Delegation is an abstraction mechanism which centralizes object  method  behavior   Generally spoken  use delegation as alternative to inheritance  Inheritance is a good strategy  when a close relationship exist in between parent and child object  however  inheritance couples objects very closely  Often  delegation is the more flexible way to express a relationship between classes   This pattern is also known as  proxy chains   Several other design patterns use delegation - the State  Strategy and Visitor Patterns depend on it

[javascript] What is DOM Event delegation?

Examples related to javascript

Examples related to event-handling

Examples related to dom-events

Examples related to event-delegation