011. The Event Categories
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
Events can be broadly categorized into Mouse Events (click, mouseover), Keyboard Events (keydown, keyup), and Form Events (submit, change, input). By attaching listeners to DOM elements using addEventListener, you tell the browser to execute a specific callback function whenever that interaction occurs.
022. The Event Object & Default Behavior
When an event fires, it automatically passes an Event Object to your callback function. This object contains vital metadata, like which key was pressed (event.key) or the mouse coordinates. Crucially, it provides the event.preventDefault() method, which allows you to stop the browser from executing its default action (like refreshing the page when a form is submitted).
?Frequently Asked Questions
Why use `addEventListener` instead of `onclick` in HTML?
`addEventListener` allows you to attach multiple listeners to the same event on the same element, whereas `onclick` will overwrite any previous listeners.
What is Event Bubbling?
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. This is called 'bubbling'.
Can I remove an event listener?
Yes, using `removeEventListener()`. However, you must pass the exact same function reference that you used when adding it, which means anonymous functions cannot be easily removed.
