<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>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
다음과 같이 부모리스트와 자식 리스트들이 있을 경우에 자식리스트들은 종종 추가되고 삭제되는 경우가 있다. 이때 각각의 자식 element 들의 경우에 따라 다른 listener 혹은 동일한 listener 을 적용할 때 사용한다.
document.getElementById("parent-list").addEventListener("click", function(e) {
if(e.target && e.target.id == "post-3") {
//event
}
});
이벤트 딜리게이션은 이벤트가 발생되어야 하는 객체에 직접적으로 이벤트를 바인딩 시키는 것이 아닌 객체 상위 요소에 이벤트를 할당하고 인자를 객체를 넘겨줌으로서 실제 이벤트 타겟에 간접적으로 이벤트 바인드 효과를 주는 것을 말한다. 이는 javascript의 이벤트 할당이 메모리에 직접적으로 올라가게 됨으로 반복적이고 과다한 이벤트 할당은 프로그램 성능적으로나 반복적인 코딩등에 문제로 많이 사용되는 이벤트 바인딩 패턴.