JavaScript Tutorial in Hindi #26 | Events & Event Listeners (2025)

✅ 1. What are Events in JavaScript?

  1. Events are actions or occurrences that happen in the browser, like clicks, key presses, mouse movements, etc.
  2. They let your web page respond to user interactions or browser actions.

Examples: click, mouseover, keydown, load, submit, etc.

✅ 2. What is an Event Listener?

  1. An event listener is a function that waits and reacts when a specific event happens on an element.
  2. It’s like saying, "When this event occurs, run this code."

✅ 3. Different Ways to Add Event Listeners

1. Inline HTML attribute (not recommended)

html
CopyEdit
<button onclick="alert('Clicked!')">Click Me</button>

2. Using DOM element property

js
CopyEdit
let btn = document.querySelector("button");
btn.onclick = function() {
alert("Clicked!");
};

Note: Only one event handler per event type can be assigned this way.

3. Using addEventListener (recommended)

js
CopyEdit
let btn = document.querySelector("button");
btn.addEventListener("click", function() {
alert("Clicked!");
});
  1. Can add multiple listeners for the same event.
  2. More flexible and modern.

✅ 4. Removing Event Listeners

To remove, you must pass the same function reference:

js
CopyEdit
function handleClick() {
alert("Clicked!");
}

btn.addEventListener("click", handleClick);

// Remove listener
btn.removeEventListener("click", handleClick);

✅ 5. Interview Questions on Events

🔸 What are events in JavaScript?

🔸 How do event listeners work?

🔸 Difference between onclick and addEventListener.

🔸 How to remove event listeners?

🔸 What is event bubbling and event capturing?

🔸 What is event.preventDefault() and event.stopPropagation()?

🔸 How to handle events for dynamically created elements?