Understanding Events and Event Listeners

When you want your web page to respond to what users do—like clicking a button, typing in a field, or moving the mouse—you use events. An event is any action that happens in the browser, such as a mouse click, a key press, or a page loading. JavaScript allows you to react to these actions using event listeners.

There are many types of events you might want to handle:

• Click events: when a user clicks on an element;
• Input events: when a user types or changes a value in an input field;
• Mouse events: like moving the mouse over an element (mouseover), or pressing a mouse button (mousedown);
• Keyboard events: pressing or releasing keys (keydown, keyup);
• Form events: submitting a form (submit);
• And many more, depending on what you want to track.

To make your code respond to these events, you use the addEventListener method. This method lets you attach a function (called a handler) that runs whenever the specified event occurs on an element. The basic pattern looks like this:

element.addEventListener('eventType', handlerFunction);

Here, eventType is a string like "click" or "input", and handlerFunction is the function you want to run when the event happens. This approach separates your JavaScript from your HTML and is the recommended way to handle events.