Should I use event delegation, to be economical with JS-events at i.e. table cell level?

Question

If I have a table in which I want to react to table-cell events, is it better to put the event on the table-element and handle cell specific events with the help of i.e. closest("td"), or is it ok to put the event on the table cell? (I'm talking about tables with a large number of cells, all of which are visible.)

// pseudo react-code
return (
  <table onClick={handleCellClick}>
    <tr>
      <td>...</td><td>...</td><td>...</td><td>...</td>
    </tr>
    //...
  </table>
)

or

// pseudo react-code
return (
  <table>
    <tr>
      <td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td><td onClick={...}>...</td>
    </tr>
    //...
  </table>
)

Answer 1

Conclusion is that, in vanilla JavaScript, event delegation is the preferred solution, to avoid memory and performance issues. If you are using a JavaScript frontend library like React.js or a framework like Ember, Angular, ... you have to read the docs and check how events are managed. In case of React.js it is unnecessary, to implement custom event delegation, because React.js does this optimisation for you.

Answer 2

Since you're asking about React specifically: No, you don't need to put only a single event handler at the table, React already does event delegation for you. So using <td onClick={…}> is probably a lot simpler, especially if you use nested components.

Answer 3

Without really knowing what your click handler is meant to be doing, here's an an example using event delegation, and data attributes, to show how you can identify individual cells.

const { useState } = React;

function Example() {

  function handleClick(e) {
    if (e.target.matches('td')) {
      const { dataset: { id } } = e.target;
      console.log(id);
    }
  }

  return (
    <table onClick={handleClick}>
      <tr>
        <td data-id="1-1">1-1</td>
        <td data-id="1-2">1-2</td>
        <td data-id="1-3">1-3</td>
        <td data-id="1-4">1-4</td>
      </tr>
      <tr>
        <td data-id="2-1">2-1</td>
        <td data-id="2-2">2-2</td>
        <td data-id="2-3">2-3</td>
        <td data-id="2-4">2-4</td>
      </tr>
    </table>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

table { border-collapse: collapse; bordeR: 1px solid #565656; }
td { padding: 0.44em; border: 1px solid #dfdfdf; }
td:hover { cursor: pointer; background-color: #ffff00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>