Performance & Rendering

Preview — 3 of 10 questions

What will happen when this code is executed and the inner div is clicked?

javascript

const outer = document.getElementById("outer");
const inner = document.getElementById("inner");

// Capturing phase
outer.addEventListener("click", () => console.log("Outer (capture)"), true);
inner.addEventListener("click", () => console.log("Inner (capture)"), true);

// Bubbling phase
inner.addEventListener("click", () => console.log("Inner (bubble)"));
outer.addEventListener("click", () => console.log("Outer (bubble)"));

AInner (capture) → Outer (capture) → Inner (bubble) → Outer (bubble)

BOuter (capture) → Inner (capture) → Inner (bubble) → Outer (bubble)

CInner (capture) → Inner (bubble) → Outer (capture) → Outer (bubble)

DOuter (capture) → Outer (bubble) → Inner (capture) → Inner (bubble)

What is the difference between stopPropagation() and preventDefault()?

javascript

const child = document.getElementById("child");
child.addEventListener("click", (e) => {
  e.stopPropagation(); // Stop bubbling to parents
  console.log("Child clicked");
});

const parent = document.getElementById("parent");
parent.addEventListener("click", () => {
  console.log("Parent clicked"); // Won't fire
});

AstopPropagation() prevents the default action, while preventDefault() stops bubbling.

BstopPropagation() stops the event from bubbling, while preventDefault() stops the default action.

CThey do the same thing.

DpreventDefault() only works with forms.

What will be logged when a <span> inside a <button> inside <div class="container"> is clicked?

javascript

document.querySelector(".container").addEventListener("click", (event) => {
  console.log("Target tag:", event.target.tagName);
  console.log("Current target tag:", event.currentTarget.tagName);
});

ATarget tag: SPAN, Current target tag: SPAN

BTarget tag: BUTTON, Current target tag: BUTTON

CTarget tag: SPAN, Current target tag: DIV

DTarget tag: DIV, Current target tag: DIV

Answer all 10 questions (7 more), see explanations for every answer, and track your score.