[JavaScript] 이벤트 위임(Event Delegation)

상위 노드에서 하위 노드의 이벤트들을 제어하는 방식

하위 노드에는 이벤트 설정 없음

//======================

// 예제

    <ul id="parent-list">

        <li id="post-1">Item 1</li>

        <li id="post-2">Item 2</li>

        <li id="post-3">Item 3</li>

    </ul>

    <script>

        //상위 노드에 이벤트 설정

        document.getElementById("parent-list").addEventListener("click", function (e) {            

            if (e.target && e.target.nodeName == "LI") {                

                console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");

            }

        });

    </script>

//==========

* 왜 이벤트 위임(delegation)을 해야 하는가?

https://github.com/nhnent/fe.javascript/wiki/August-22-August-26,-2016     <=======  !!!!!!

- 이벤트 위임의 이점

1. 동적인 엘리먼트에 대한 이벤트 처리가 수월하다.

2. 이벤트 핸들러 관리가 쉽다.

3. 메모리 사용량이 줄어든다.

4. 메모리 누수 가능성도 줄어든다.

//======================

//참고

왜 이벤트 위임(delegation)을 해야 하는가?

https://github.com/nhnent/fe.javascript/wiki/August-22-August-26,-2016     <=======  !!!!!!

How JavaScript Event Delegation Works

https://davidwalsh.name/event-delegate