Delegated Events

[rbiggs]

I see that you can create inline event handlers on individual elements. This is fine for simple things. However, it you are creating a complex UI with a lot of user interaction, this is not efficient. Say you have a list with a hundred or more list items, each of which might hold several actionable buttons. That would result in hundreds of events being registered. Is there some way to register delegated events?

[shama]

You can delegate events by attaching the event to a parent element:

var el = hx`<div onclick=${function (e) {
  console.log('button', e.target.textContent, 'was clicked')
}}>
  <button>one</button>
  <button>two</button>
  <button>three</button>
</div>`