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?

Category	Examples
Mouse Events	click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave
Keyboard Events	keydown, keypress, keyup
Form Events	submit, change, focus, blur, input
Window Events	load, resize, scroll, unload
Clipboard	copy, paste, cut

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()?

Method	Purpose
preventDefault()	Stops default browser behavior
stopPropagation()	Stops event from bubbling/capturing further

Ques: How to detect key presses?

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

Ques: Difference between keydown, keypress, and keyup?

Event	Triggered When	Use Case
keydown	Key is pressed	Common for shortcuts
keypress	Key produces a character	Deprecated
keyup	Key is released	Detect finished input

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?

Event	Bubbling	Trigger
mouseenter	No	When mouse enters element
mouseover	Yes	When mouse enters element or child

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?

Event	Triggered When
input	On every keystroke
change	When user leaves input field or presses Enter

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?

Property	Refers To
event.target	Element that triggered the event
event.currentTarget	Element that the handler is attached to

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).