이벤트 위임

by hyunkikim

HTML

<ul class="root">
  <li class="li1">Element1 is <strong>good</strong></li>
  <li class="li2">Element2 is <strong>good</strong></li>
  <li class="li3">Element3 is <strong>good</strong></li>
  <li class="li4">Element4 is <strong>bad</strong></li>
  <li class="li5">Element5 is <strong>good</strong></li>
</ul>

CSS

li {
  width: 200px;
  padding: 1em;
  border: 1px solid black;
}

JavaScript

const root = document.querySelector(".root")

root.addEventListener("click", () => {
	console.log("eventTarget", event.target.className)
	console.log("currentTarget", event.currentTarget.className)
	if(event.target.nodeName === "LI") {
		alert(event.target.textContent)
	}
  return;
})