리스트에 이벤트를 효율적으로 등록해보자!>

기존의 코드 - 각 <li> 태그를 선택하여 각각 이벤트를 주입해준다.

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>

    let ul = document.querySelectorAll('li');

    ul.forEach(li => li.addEventListener('click', function(e) {
      alert("clicked : " + e.target.innerHTML);
    }))

  </script>

 

개선된 코드 - <ul>태그에 이벤트를 주입하고 클릭한 이벤트가 <li> 이라면 내부로직을 동작시킨다.

 

e.currentTartget : 이벤트 발생 시작 요소 ( 이벤트 핸들러가 부착된 요소)

e.target : 이벤트 전파 최하단 요소

 

  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>

    let app = document.getElementById('list');

    app.addEventListener("click", function(e) {
        if (e.target && e.target.nodeName == "LI") {
          alert("clicked : " + e.target.innerHTML);
        }
    })

  </script>