- browsers register events based on user's interaction with a specific page
- e.g. click, scroll, hover, keystroke...
- scripts can be written to repsond to events via the DOM e.g. trigger a function

Types of events
- UI events
→ load
→ unload
→ error
→ resize
→ scroll
- kb events
→ keyup
→ keydown
→ keypress
- mouse
→ click
→ dblclick
→ mousedown/up
→ mouseover
- focus
→ focus/focusin
→ blur/focusout
- form
→ input
→ change
→ submit
→ reset

Event object properties and methods
- event.target - element that triggered the event
- event.currentTarget - element to which handler is attached
- event.type - returns type of event

Two ways to bind an event to an element:
- event listeners
→ DOM level 1
→ not directly attached to the target element
→ more flexible and modular
→ can trigger more than one function at a time
→ element.addEventListener('event',functionName [, Boolean]); ← indicates event bubbling
→ e.g. document.addEventListener('click', handleClick) ← if no 3rd param, default to false
- event handlers
→ DOM level 0
→ directly attached to target element
→ trigger one function at a time
→ element.on<event> = functionName;

Event bubbling:
- event gets triggered from innermost element outwards
Event capturing
- event gets triggered from the outermost element inwards

event.preventDefault() - overrides the default behaviour of some event. e.g. preventing a form from being submitted or a link from navigating to a new page
event.stopPropagation() - stops the event from propagating further into the DOM hierarchy, preventing event bubbling or capturing

Why event propagation?

document.getElementById('categories').addEventListener('click',function(event){
    const target = event.target
    
    if(target.classList.contains('category')){
        const subcategories = target.querySelector(".subcategories");
        if(subcategories){
            subcategories.classList.toggle('active');
        }
    }
});


var element = document.getElementById('myElement')

element.addEventListener('mouseover', () -> {
    element.style.backgroundColor = whatever

});

element.addEventListener('mouseout', () -> {
    element.style.backgroundColor = whatever

});

Index