Advanced Browser APIs

Preview — 3 of 10 questions

What will be logged when the button is clicked?

javascript

const button = document.querySelector("button");

button.addEventListener("click", (e) => {
  console.log("Handler 1");
  e.stopImmediatePropagation();
});

button.addEventListener("click", () => {
  console.log("Handler 2");
});

document.body.addEventListener("click", () => {
  console.log("Body");
});

AHandler 1

BHandler 1, Body

CHandler 1, Handler 2, Body

DHandler 2, Body

What will be logged when a dynamically added button is clicked?

javascript

document.addEventListener("click", (e) => {
  if (e.target.matches("button.dynamic")) {
    console.log("Clicked: " + e.target.textContent);
  }
});

// Add button dynamically
const button = document.createElement("button");
button.classList.add("dynamic");
button.textContent = "Dynamic Button";
document.body.appendChild(button);

// Click the button
button.click();

AClicked: Dynamic Button

BNothing is logged

CError: button is not defined

DClicked: (without text)

What will happen and how many reflows are triggered?

javascript

const elements = document.querySelectorAll(".box");

for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = elements[i].offsetWidth + 10 + "px";
}

AOne reflow total

BOne reflow per element (inefficient)

CNo reflows (only style changes)

DThe code causes an infinite loop

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