Events in JavaScript allow your web page to respond to user actions, while event listeners provide a more flexible way to attach functions to these events. Understanding the difference is crucial for creating interactive web pages.

This blog explains events vs event listeners with examples.

---

⭐ 1. What Are JavaScript Events?

An event is an action that happens in the browser, such as:

• Clicking a button
• Hovering over an element
• Typing in a text box
• Submitting a form
• Loading the page

You can respond to events by attaching a function to run when the event occurs.

---

⭐ 2. Adding Events Inline (Old Method)

You can attach events directly in HTML using attributes like onclick, onmouseover, etc.

Example:

<button onclick="alert('Button clicked!')">Click Me</button>

✅ Simple but not recommended because it mixes HTML and JavaScript.

---

⭐ 3. Event Handlers in JavaScript

You can attach an event directly to an element’s property.

Example:

let button = document.getElementById("myBtn");
button.onclick = function() {
  alert("Button clicked!");
};

❌ Limitation: You can only attach one event handler per property. Assigning a new function overwrites the old one.

---

⭐ 4. Event Listeners (Recommended)

addEventListener allows you to attach multiple functions to a single event without overwriting others.

Syntax:

element.addEventListener(event, function, useCapture);

Example:

let button = document.getElementById("myBtn");

button.addEventListener("click", function() {
  console.log("First function");
});

button.addEventListener("click", function() {
  console.log("Second function");
});

Output when clicked:

First function
Second function

---

⭐ 5. Removing Event Listeners

You can remove an event listener using removeEventListener.

Example:

function greet() {
  console.log("Hello!");
}

button.addEventListener("click", greet);
button.removeEventListener("click", greet);

---

⭐ 6. Event Object

The event object contains information about the event, such as:

• The element clicked (event.target)
• Mouse coordinates (event.clientX, event.clientY)
• Key pressed (event.key)

Example:

document.addEventListener("click", function(event){
  console.log("Clicked element:", event.target);
});

---

⭐ 7. Advantages of Event Listeners

• Attach multiple functions to the same event
• Separate HTML and JavaScript for cleaner code
• Easier to manage and remove events
• Supports modern JavaScript practices

---

⭐ Conclusion

Events and event listeners are crucial for interactive web applications. While inline events are simple, addEventListener is recommended for flexibility, maintainability, and modern JavaScript development.

---

📌 Citations

🔗 View other articles about Javascript:
https://savanka.com/category/learn/js/

🔗 External Javascript Documentation:
https://www.w3schools.com/js/