Event Delegate : Child Element들 각각에 Event Handler를 추가하는 것이 아니라

Parent Element에 Event Handler를 추가한 뒤 Event가 발생한 node를 확인하여 처리하는 방법.

장점 : 등록되는 Event Handler의 수를 줄일 수 있다. (성능에 도움이 된다.)

코드가 간결해지며 유지보수가 수월해진다.

단점 : 불필요한 Event를 filtering하는 작업이 추가된다.


Example

아래와 같이 keys라는 div안에 key를 class로 하는 button element가 5개가 있다면

각각의 button에 Event Listener를 등록하는 대신 부모 Element(keys)에만

Event Listener를 등록한 뒤 Event Handler내에서 불필요한 click을

걸러내는 작업을 하는 방식

HTML Code

Javascript Code

출처 : Javascript Patterns, O’Reilly