DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for JSByte: JavaScript Event handlers
Shruti Kapoor
Shruti Kapoor

Posted on • Updated on

JSByte: JavaScript Event handlers

I will be sharing bite sized learnings about JavaScript regularly in this series. Follow along with me as I re-learn JavaScript. This series will cover JS fundamentals, browsers, DOM, system design, domain architecture and frameworks.


Event propagation

Specificity:
If a node has children and has an event handler attached to it, it is able to listen to not only its own events, but also events on its children.
However, if two DOM elements have a handler, the more specific one - the closest to the target, fires off first.

Targeting multiple elements
A node can have only one onclick attribute, so you can register only one handler this way.

A node can have multiple addEventListener, so you can attach multiple click handlers using addEventListener. It also gives access to removeEventListener to unsubscribe from the event.

When you have an event handler that needs to be attached to multiple elements, attach the handler to the parent element instead of targeting each element individually.

<div class="buttons">
  <button>Press 1</button>
  <button>Press 2</button>
  <button>Press 3</button>
</div>
Enter fullscreen mode Exit fullscreen mode

const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);

buttonContainer.addEventListener('click', event => {
  console.log(event.target.value)
})
Enter fullscreen mode Exit fullscreen mode

Common events

onclick
dblclick
mousedown
mouseup
mousemove
keydown
keyup
touchmove
touchstart
touchend
onload
onfocus
onblur
onerror
onscroll


Interested in more JSBytes? Sign up for the newsletter

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!