JavaScript Events — Interview Questions & Answers

Ques: What is an event in JavaScript?

Ans: An event is an action or occurrence that happens in the browser — like a user clicking a button, pressing a key, or submitting a form — that can be handled with JavaScript.

Example:

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

Ques: What are some common DOM events?

Ques: How do you handle events in JavaScript?

Ans: There are three main ways to attach event handlers:

Inline HTML attribute

<button onclick="sayHello()">Click</button>

DOM property

document.getElementById("btn").onclick = sayHello;

addEventListener() (Recommended)

document.getElementById("btn").addEventListener("click", sayHello);

Ques: What is addEventListener() and why is it preferred?

Ans: addEventListener() allows multiple event handlers for the same event, supports event capturing, and gives more flexibility.

element.addEventListener("click", function() {
  console.log("Clicked!");
});

Ques: How can you remove an event listener?

Ans: Using removeEventListener() with the same function reference:

function greet() {
  console.log("Hi");
}
btn.addEventListener("click", greet);
btn.removeEventListener("click", greet);

Ques: What are event objects?

Ans: When an event occurs, JavaScript automatically passes an event object (event or e) containing details about it (target, type, coordinates, etc.)

button.addEventListener("click", function(e) {
  console.log(e.type, e.target);
});

Ques: What is event propagation?

Ans: Event propagation determines how events flow through the DOM tree.

It has three phases:

1. Capturing Phase (top → target)
2. Target Phase
3. Bubbling Phase (target → top)

Ques: What is event bubbling?

Ans: In bubbling, an event starts at the target element and bubbles upward through ancestors.

Example:

document.body.addEventListener("click", () => console.log("Body"));
document.getElementById("div1").addEventListener("click", () => console.log("Div"));
document.getElementById("btn").addEventListener("click", () => console.log("Button"));

Click button output:

Button → Div → Body

Ques: What is event capturing (trickling)?

Ans: In capturing, the event is handled from outermost to innermost element. You enable it by setting true as the third argument:

element.addEventListener("click", handler, true);

Ques: How do you stop event propagation?

element.addEventListener("click", function(e) {
  e.stopPropagation(); // Stops bubbling or capturing
});

Ques: What is stopImmediatePropagation()?

Ans: It prevents the event from calling other handlers on the same element.

button.addEventListener("click", e => {
  e.stopImmediatePropagation();
});

Ques: What is event delegation?

Ans: A technique where you attach a single event listener to a parent element to handle events for its children. It uses event bubbling.

Example:

document.getElementById("list").addEventListener("click", function(e) {
  if (e.target.tagName === "LI") {
    console.log("Clicked:", e.target.textContent);
  }
});

Ques: What is preventDefault() used for?

Ans: It stops the default browser action (like submitting a form or following a link).

form.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log("Form stopped!");
});

Ques: Difference between stopPropagation() and preventDefault()?

Ques: How to detect key presses?

document.addEventListener("keydown", e => {
  console.log("Key pressed:", e.key);
});

Ques: Difference between keydown, keypress, and keyup?

Ques: How to detect mouse position in events?

document.addEventListener("mousemove", e => {
  console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
});

Ques: What is mouseenter vs mouseover?

Ques: How to handle input change in real time?

input.addEventListener("input", e => {
  console.log(e.target.value);
});

Ques: Difference between input and change events?

Ques: How to detect form submission?

form.addEventListener("submit", e => {
  e.preventDefault();
  console.log("Form submitted!");
});

Ques: What is a custom event?

Ans: You can create and dispatch custom events using the CustomEvent constructor.

const myEvent = new CustomEvent("greet", { detail: "Hello!" });
document.dispatchEvent(myEvent);

document.addEventListener("greet", e => {
  console.log(e.detail);
});

Ques: Does every event bubble?

Ans: No, some events like focus, blur, and mouseenter do not bubble.

Ques: What happens if multiple listeners are added for the same event?

Ans: They execute in order of registration unless stopImmediatePropagation() is used.

Ques:. Can you attach multiple listeners of the same type to the same element?

Ans: Yes, using addEventListener(). Not possible with onclick (overwrites previous one).

Ques: How can you trigger an event manually?

button.click(); // or
button.dispatchEvent(new Event("click"));

Ques: What are passive event listeners?

Ans: Used to improve scrolling performance by telling the browser you won’t call preventDefault().

window.addEventListener("scroll", handleScroll, { passive: true });

Ques: What is the difference between target and currentTarget?

Ques: How to handle multiple event types with one listener?

["click", "mouseover"].forEach(evt =>
  button.addEventListener(evt, handleEvent)
);

Ques: Can events be asynchronous?

Ans: Event handling itself is synchronous, but handlers can contain asynchronous code (like fetch() or Promises).