gnat / surreal

🗿 Mini jQuery alternative. Dependency-free animations. Locality of Behavior. Use one element or arrays transparently. Pairs with htmx. Vanilla querySelector() but better!
https://gnat.github.io/surreal/example.html
MIT License
1.3k stars 26 forks source link

QUESTION: How to do keydown event on a btn? #29

Closed liketoeatcheese closed 5 months ago

liketoeatcheese commented 5 months ago

Hey mate,

First of all, what a genius plugin!!!

I'm trying to get rid of a bunch of my js files with Surreal. How would I do me().on("multipleevents?"), like click and keydown (Esc) at the same time? For example, how would I achieve something like this but keep the locality of behaviour effect?

<button id="cancelBtnDrawerForm"/>
const cancelBtnDrawerForm = document.getElementById('cancelBtnDrawerForm')
const cancelDrawerForm = () => {
  form.classList.remove('show')
  bodyWrapper.classList.remove('scaled')
  body.classList.remove('scaled')
  setTimeout(() => {
    form.style.display = 'none'
    backdrop.style.display = 'none'
  }, 200)
}

cancelBtnDrawerForm.addEventListener('click', cancelDrawerForm)
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    cancelDrawerForm();
  }
});
gnat commented 5 months ago

Hey man, thank you for the kind words!

There's a lot of value in having threads like this to discuss patterns as people discover them, so I'll convert this to an ongoing discussion.