Javascript DOM- Event Delegation

Home / JavaScript – Tutorial / Javascript DOM- Event Delegation

Javascript DOM- Event Delegation

javascript Capturing and bubbling provides us to implement one of the most powerful events handling patterns called event delegation.

The idea is that if we have a lot of HTML elements handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor.

In the event handler, you can get the event.target to see where the event actually happened and handle it.

Example:

<!DOCTYPE HTML>
<html>

<body>
 <table id="bagua-table">
  <tr>
   <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
  </tr>
  <tr>
   <td class="nw"><strong>Northwest</strong>
    <br>Metal
    <br>Silver
    <br>Elders
   </td>
   <td class="n"><strong>North</strong>
    <br>Water
    <br>Blue
    <br>Change
   </td>
   <td class="ne"><strong>Northeast</strong>
    <br>Earth
    <br>Yellow
    <br>Direction
   </td>
  </tr>
  <tr>
   <td class="w"><strong>West</strong>
    <br>Metal
    <br>Gold
    <br>Youth
   </td>
   <td class="c"><strong>Center</strong>
    <br>All
    <br>Purple
    <br>Harmony
   </td>
   <td class="e"><strong>East</strong>
    <br>Wood
    <br>Blue
    <br>Future
   </td>
  </tr>
  <tr>
   <td class="sw"><strong>Southwest</strong>
    <br>Earth
    <br>Brown
    <br>Tranquility
   </td>
   <td class="s"><strong>South</strong>
    <br>Fire
    <br>Orange
    <br>Fame
   </td>
   <td class="se"><strong>Southeast</strong>
    <br>Wood
    <br>Green
    <br>Romance
   </td>
  </tr>

 </table>

 <script>
  let table = document.getElementById('bagua-table');

  let selectedTd;

  table.onclick = function(event) {
   let target = event.target;

   while (target != this) {
    if (target.tagName == 'TD') {
      highlight(target);
      return;
     }
     target = target.parentNode;
    }
   }

   function highlight(node) {
    if (selectedTd) {
      selectedTd.classList.remove('highlight');
     }
     selectedTd = node;
     selectedTd.classList.add('highlight');
  }
 </script>
</body>
</html>

CSS:

#bagua-table th {
 text-align: center;
 font-weight: bold;
}

#bagua-table td {
 width: 150px;
 white-space: nowrap;
 text-align: center;
 vertical-align: bottom;
 padding-top: 5px;
 padding-bottom: 12px;
}

#bagua-table .nw {
 background: #999;
}

#bagua-table .n {
 background: #03f;
 color: #fff;
}

#bagua-table .ne {
 background: #ff6;
}

#bagua-table .w {
 background: #ff0;
}

#bagua-table .c {
 background: #60c;
 color: #fff;
}

#bagua-table .e {
 background: #09f;
 color: #fff;
}

#bagua-table .sw {
 background: #963;
 color: #fff;
}

#bagua-table .s {
 background: #f60;
 color: #fff;
}

#bagua-table .se {
 background: #0c3;
 color: #fff;
}

#bagua-table .highlight {
 background: red;
}

OUTPUT:

Javascript DOM- Event Delegation