All about events
I've learned a lot about DOM events this week. Probably nothing new for frontend ninjas. But it was for me.
Custom events #
You can dispatch and listen your own custom events:
// dispatch
document.dispatchEvent(new Event('closemenu'))}
// listen
document.addEventListener('closemenu', function(event) {
})Touch devices and mouse events #
I've learned that mouseenter event is fired on mobile browsers. For a single click, this is the order of events:
- touchstart
- touchmove
- touchend
- mouseover
- mousemove
- mousedown
- mouseup
- click
Source: https://www.html5rocks.com/en/mobile/touchandmouse/#toc-together
Event bubbling and capturing #
And the most shocking fact: events are captured down and then bubbled up again https://www.quirksmode.org/js/events_order.html
Read more: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events