[Javascript] 이벤트 위임

<ul id="itemList">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
</ul>
<p id="test"></p>

itemList 클릭 시 test에 붙여넣는 이벤트를 구현할 때

 

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

 item class를 찾아 class를 가진 해당 li 태그에 이벤트를 추가

li태그가 많아진다면 모두 DOM에 등록되어 비효율적인 코드가 됨

 

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

item마다  EventListener를 생성하는 것보다 itemList를 DOM에 등록하여 EventListener가 사용자가 클릭한 item을 찾아 이벤트를 발생시키는 것이 효율적임