위임을 사용한 동적 목록

동적 요소 문제

직접 리스너의 문제

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

위임은 바로 작동합니다

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

항목 추가하기

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

항목 제거하기

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

하위 동작 구분하기

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

데이터에서 렌더링하기

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

정리 문제 없음

클래스 전환하기

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

안정적인 식별자 읽기

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

입력 이벤트도 사용하기

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

빠른 확인

복습