이벤트 위임

by hyunkikim

HTML

<ul>
  <li>Element1 is <strong>good</strong></li>
  <li>Element2 is <strong>good</strong></li>
  <li>Element3 is <strong>good</strong></li>
  <li>Element4 is <strong>bad</strong></li>
  <li>Element5 is <strong>good</strong></li>
</ul>

CSS

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

JavaScript

const lists = document.querySelectorAll("li")

lists.forEach((list) => {
	list.addEventListener("click", () => {
    if(event.target.nodeName === "LI") {
      alert(event.target.textContent)
    }
  	return;
  })
	
})