Event Delegation in _hyperscript

Deniz Akşimşek

This is how you do it:

on click
tell the closest <li/> to the target
remove yourself
-- do more stuff...
-- "you" refers to the clicked list item

Or more concisely:

on click tell closest <li/> to target
remove yourself

I’ve seen some people use a pattern like this:

<ul>
{% for item in items %}
<li _="on click remove me"></li>
{% endfor %}
</ul>

This is convenient to write if you have a server-side templating system, but has a few issues:

  • The code needs to be parsed N times where N is the number of items.
  • The resulting HTML is bloated.
  • If you add more items client-side, you need to repeat the code there.

The pattern for resolving this is called event delegation. Here’s how you might do it in JavaScript:

ul.addEventListener('click', e => {
const li = e.target.closest('li')
if (!li) return
li.remove()
})

We add a single event listener to the enclosing list, which finds the item that was clicked and manipulates it.

In _hyperscript, the tell command allows us to manipulate an element other than me conveniently, by changing the implicit target from me to you, which refers to the “element being told”.

This page accepts Webmentions.