Events & Event Listeners

A web page without events is just a digital poster. Events make it interactive! They allow your code to react when a user clicks, types, scrolls, or hovers.

1. What are Events? 🔔

What is it? Signals fired by the browser when something interesting happens.

Common Events:

• Mouse: click, dblclick, mouseenter, mouseleave
• Keyboard: keydown, keyup
• Form: submit, change, focus, blur
• Window: resize, scroll, load

2. Adding Event Listeners 👂

To react to an event, you attach an Event Listener to an element.

Method: element.addEventListener(event, callback)

3. The Event Object 📦

When an event happens, the browser automatically passes an Event Object to your function. It contains all the details about the event.

4. Preventing Default Behavior 🛑

Some elements have default actions (e.g., links navigate to a new page, forms submit and reload). You can stop this using event.preventDefault().

5. Event Bubbling & Propagation 🫧

Events in the DOM don't just happen on one element. They bubble up from the target element to its parents.

Flow: Button ➡️ Div ➡️ Body ➡️ HTML ➡️ Document

6. Event Delegation 🤝

Instead of adding listeners to 100 list items, add one listener to the parent <ul>. This uses bubbling to catch events from children. It's much more efficient!

Quiz

Key Takeaways

✅ addEventListener attaches handlers.
✅ Event Object (e) holds details.
✅ preventDefault stops default actions (like form submit).
✅ Bubbling means events go up the tree.
✅ Delegation uses bubbling to handle many elements efficiently.

What's Next?

Now let's use events to handle user input in Forms & Input Handling!

Keep coding! 🚀