Respond to user interactions like clicks, mouseovers, and key presses.
Events are at the heart of interactive web pages. They are signals fired by the browser to indicate that something has happened, such as a user clicking a button, a page finishing loading, or a key being pressed. To make your page respond to these events, you use event listeners. The modern and recommended way to handle events is with the `addEventListener` method. This method is called on a target element (like a button or the entire document) and takes two main arguments: the type of event to listen for (e.g., `'click'`, `'mouseover'`) and a callback function to execute when the event occurs. This callback function automatically receives an `event` object as its argument, which contains valuable information about the event, such as the target element (`event.target`), mouse coordinates, or which key was pressed. Using `addEventListener` is superior to older methods (like `onclick` properties) because you can attach multiple listeners for the same event to a single element without overwriting previous ones. You can also have more control over the event propagation phases (capturing vs. bubbling) and easily remove listeners with `removeEventListener`, which is important for preventing memory leaks in single-page applications.