자바스크립트 이벤트(Event) 위임하기

자바스크립트 이벤트(Event) 위임하기

해당 Itemlist를 클릭했을 경우 해당 아이템에 대하여 이벤트를 구현할 때

<p id="demo"></p>
  <ul id="itemList">
    <li class="item">kyungtae</li>
    <li class="item">kokyungtae</li>
    <li class="item">ktko</li>
    <li class="item">ktko_0714</li>
  </ul>
<p id="ktko"></p>

아래와 같이 Id에서 item class를 찾아 class를 가진 해당 li 태그에 이벤트를 추가한다.

아래 코드는 문제가 없지만 만약에 li태그가 많다면? 50개 100개 1000개가 된다면 li태그들이 DOM에 등록되어 비효율적인 코드가 된다.

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var app = document.getElementById("itemList");
    var items = document.getElementsByClassName("item");
    
    for(let item of items) {
        item.addEventListener("click", function() {
            document.getElementById("ktko").innerHTML = item.innerHTML;
        });
    }
  });
</script>

item마다 이벤트 리스너를 생성하는 것 보다는 itemList를 DOM에 등록하여 이벤트 리스너가 사용자가 클릭한 아이템을 찾아 이벤트를 발생시키는 것이 제일 효율적이다.

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var app = document.getElementById("itemList");
        app.addEventListener("click", function(event) {
            if(event.target.nodeName == "LI"){
                document.getElementById("ktko").innerHTML = event.target.innerHTML;
            }
        });
    });
</script>