Handling events for many elements tutorial: is this always the best approach?

programming web dev
2

What your getting is pointer events from the parent element.

There’s 2 ways to deal with it and its good practice to use both.

Pointer events: none

  • set all elements in your CSS as *{pointer-events: none}
  • create a CSS selector that targets every element that you want click events from
    • e.g .clickable{pointer-events: auto}
    • or button, input, select{pointer-events: auto}

Default return function

  • set your events as a data-set attribute to the DOM node e.g.
    • <div data-event = “openLightbox” class = "clickable" >Image</div>…
  • access the event like e.target.dataset.event ("openLightbox")
  • run/ access the desired function as a property of an object (openLightbox is now the object method… events.openLightbox )
  • have a fallback function (no_event) for when you have forgotten to add an attribute (data-event = "open_lightbox") to the element as above

e.g.

const events = {
    no_event: function(){return console.log("no event attached")},
    openLightbox: function(e){
      parent_id = e.target.parentElement.id;
 //run some code
    }
}

const listenHandler = function(e){
  if(e.target === e.currentTarget) return
  let run = events[e.target.dataset.event] || events["no_event"];
e.stopPropogation()
  return run(e)
}

FYI you can just add an eventListener() and an event object (all your event functions in one object) for an entire page IF there’s no shadow DOM.

And also… you don’t have to use div all over your page.

There are elements that are semantic e.g. <nav> <a> <button> but <div> and <span> mean nothing to the browser without e.g. role = "navigation".

If you have an undefined customElement e.g.<portfolio-carousel> (not registered with e.g customElements.define("portfolio-carousel", portf_carousel)… then the browser will treat it as a <div> by default…

something like this is way more readable than <div> soup:

<portfolio-carousel>
    <image-card>
        <frame-16-9>
            <img src="" alt="">
        </frame-16-9>
    </image-card>
    <image-card>
        <frame-16-9>
            <img src="" alt="">
        </frame-16-9>
    </image-card>
</portfolio-carousel>

You can also use more CSS selectors e.g
frame-16-9 { aspect-ratio: 16 / 9;}

instead of class soup like Tail Wind…

Is it just me or does the words “tail wind” immediately bring to mind a fart… :laughing:

I hope this helps :slightly_smiling_face:

2 Likes