What's the best practice for an event handler? I'm unsure if I should put the buttons with the function to trigger or if I should, like jQuery, wait for the button's on click event.
Usually you can do this:
Short answer: definitely do it the first way. Event delegation is way more performant, but requires extra conditionals in your code, so it's basically a complexity versus performance tradeoff.
Longer Answer: For a small number of elements, adding individual event handlers works fine. However, as you add more and more event handlers, the browser's performance begins to degrade. The reason is that listening for events is memory intensive.