Working with Events Questions about reef

[cferdinandi]

Hi @mouse0270, so... it's all about scope.

The Class needs to be in the global scope to call it form an on* event on the element. As an alternative to on events, you can use event delegation without having to wait for the render to happen.

If you are going to attach events directly to the rendered elements, I would use reef:start as your event hook if they're not going to be removed from the UI later.

[mouse0270]

Its a module, it doesn't get defined on the global scope. Which is fine, I was just trying to provide an example of why passing in events used to be a very nice feature.

Also, event delegation is great, and you did a fantastic job writing that article, it might be best to update it. Though it does a great job at explaining how to use event delegation in pure vanilla JS, it leaves out the fact that it won't work on any element that has children in it.

<button class="click-me" id="click-me-1">Click Me</button>
<button class="click-me" id="click-me-2"><span>Click Me</span></button>

<script>
// Listen for click events
document.addEventListener('click', function (event) {
  if (!(event.target.matches('.click-me'))) return;
  
  console.log('An element was brought into focus.');
  console.log(event.target);
});
</script>

In this example, you'll find that the second button never triggers the click event unless you click on the very edge of the button because javascript has registered that the span is the target element.

changing the script to something like

// Listen for click events
document.addEventListener('click', function (event) {
  if (!(event.target.closest('.click-me'))) return;
  const element = event.target.closest('.click-me')
  
  console.log('An element was brought into focus.');
  console.log(element );
});

I know this was off-topic, but it was a really well written article and figured it would be a nice addition to include some of the limitations of event delegations and how to get around them.