Hey friends! 👋 I’m Vikas Sankhla, your tech buddy from the Web Codder YouTube channel. Today we’re learning how to make web pages ALIVE with event handling.

Think about this:

• Clicking a button 🖱️
• Typing in a form ⌨️
• Hovering your mouse over a menu 🎯

These are all events – little things that happen on your page. And guess what? JavaScript can listen and react to them! Let’s learn how. 🚀

🎬 What Are Events in JavaScript?

An event is any action the user does on the page.

Here are some common events:

In short: events happen all the time! 🌟

👂 Event Listeners – How JavaScript Listens 👀

We use event listeners to tell JavaScript:
“Hey, when THIS happens, DO THIS!”

The best way? Using addEventListener().

Basic Example:

htmlCopyEdit<button id="myButton">Click Me!</button>

JavaScript:

jsCopyEditlet btn = document.getElementById("myButton");

btn.addEventListener("click", function() {
    alert("You clicked the button! 🎉");
});

👉 What happens:

• You click the button ➡️ you get an alert popup.

Easy, right? ✅

🚦 Different Types of Events

Let’s quickly look at different events and how to handle them.

1️⃣ Click Event

jsCopyEditdocument.getElementById("myButton").addEventListener("click", function() {
    console.log("Button was clicked!");
});

2️⃣ Mouseover (Hover)

jsCopyEditdocument.getElementById("myDiv").addEventListener("mouseover", function() {
    console.log("Mouse is over the div!");
});

3️⃣ Keydown

jsCopyEditdocument.addEventListener("keydown", function(event) {
    console.log("You pressed: " + event.key);
});

4️⃣ Submit

jsCopyEditdocument.getElementById("myForm").addEventListener("submit", function(e) {
    e.preventDefault();  // Stops the form from reloading the page
    console.log("Form submitted!");
});

🌀 Event Bubbling and Capturing

Okay, here’s where it gets a bit tricky (but don’t worry, I’ll keep it simple 😎).

Imagine you have this:

htmlCopyEdit<div id="outer">
    <button id="inner">Click Me</button>
</div>

When you click the button:

1️⃣ The button’s click event fires first
2️⃣ Then the div’s click event fires

This is called bubbling – the event bubbles UP from the inside to the outside.

Example:

jsCopyEditdocument.getElementById("inner").addEventListener("click", function() {
    console.log("Button clicked!");
});

document.getElementById("outer").addEventListener("click", function() {
    console.log("DIV clicked!");
});

Click the button ➡️ Output:

cssCopyEditButton clicked!
DIV clicked!

Capturing (Less Common)

You can also capture events on the way down (from outer to inner).
We don’t use it often, but here’s how:

jsCopyEditdocument.getElementById("outer").addEventListener("click", function() {
    console.log("DIV clicked (capturing)!");
}, true);

The true means: capture mode.

🛑 Preventing Default and Stopping Propagation

1️⃣ event.preventDefault()

Some elements have default behavior.

Example: Submitting a form reloads the page.

We can stop that like this:

jsCopyEditdocument.getElementById("myForm").addEventListener("submit", function(e) {
    e.preventDefault();  // Stop reload
    console.log("Handled without reload!");
});

2️⃣ event.stopPropagation()

Sometimes you don’t want the event to bubble up.

Example:

jsCopyEditdocument.getElementById("inner").addEventListener("click", function(e) {
    console.log("Only the button!");
    e.stopPropagation();  // Stops bubbling
});

Now, clicking the button only logs “Only the button!”, and the outer DIV doesn’t react.

🧠 Key Concepts Recap

🎯 Conclusion

Wow! Now you know how to make your web pages interactive and smart. 🚀 You learned:

• What events are
• How to add event listeners
• How bubbling & capturing work
• How to control event behavior

👉 Keep experimenting with different events – it’s the best way to learn. 🛠️

For more epic tutorials:

🎥 Subscribe on YouTube: https://www.youtube.com/@web_codder/?sub_confirmation=1

📸 Follow on Instagram: https://www.instagram.com/web_codder_official/

💬 Join our WhatsApp group: https://webcodder.dev/whatsapp

Let’s keep making the web AWESOME together! 💪🌐