Browser APIs & Storage

Preview — 3 of 10 questions

What is event bubbling in JavaScript?

javascript

<div id="parent" style="border: 1px solid black; padding: 20px;">
  <button id="child">Click me</button>
</div>

<script>
  document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked");
  });

  document.getElementById("child").addEventListener("click", () => {
    console.log("Child clicked");
  });
</script>

AEvents start from the parent element and move down to the target element.

BEvents start from the target element and move up to the parent elements.

CEvents stop at the first listener they encounter.

DEvents only trigger on the element they are directly attached to.

What is event capturing (also called trickling)?

javascript

element.addEventListener("click", handler, true); // Capturing
element.addEventListener("click", handler, false); // Bubbling (default)
element.addEventListener("click", handler); // Bubbling (default)

AEvents move from the target element to its ancestors.

BEvents move from the root of the DOM down to the target element before bubbling up.

CEvents only trigger at the root element.

DEvents bypass intermediate elements and only trigger at the target.

What is event delegation?

javascript

// Bad: Add listener to each item
document.querySelectorAll("li").forEach(item => {
  item.addEventListener("click", () => {
    console.log("Clicked: " + item.textContent);
  });
});

AAssigning an event listener to multiple elements individually.

BUsing a single event listener on a parent element to handle events for its child elements.

CPreventing event bubbling to parent elements.

DUsing inline event handlers inside HTML attributes.

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