이벤트 위임과 바인딩 방식의 차이 $(document).on('click', id, function) / $(id).click(function() { });
$(document).on('click', id, function) 와 $(id).click(function() { });는 모두 jQuery를 사용하여 클릭 이벤트를 처리하는 방식이다. 이 두 가지 방식의 주요 차이점은 이벤트 위임(Event Delegation)과 바인딩(Binding)의 차이다.
1. 이벤트 위임
$(document).on('click', id, function)방식은 이벤트 위임을 사용한다. 여기서 'document'는 이벤트가 바인딩될 요소를 나타낸다. 이벤트는 'document'에서 발생하고, 그 후에 이벤트가 발생한 요소의 'id'에 따라 필터링된다. 따라서 동적으로 생성된 요소에도 이벤트가 적용된다.
이 방식은 요소를 생성 및 제거할 때유용하며, 한 번에 많은 요소에 이벤트를 바인딩할때 효율적이다.
2. 바인딩
$(id).click(function() { }); 방식은 바인딩을 사용한다. 여기서 id는 클릭 이벤트가 바인딩될 요소를 나타낸다. 이벤트는 특정한 요소에 직접 바인딩된다.
이 방식은 일반적으로 정적인 요소에 이벤트를 적용할 때 사용된다. 동적으로 생성되는 요소에는 이벤트가 적용되지 않으며, 동적으로 생성된 요소에 이벤트를 적용하려면 각각에 대해 바인딩을 새로 해야 한다.
이러한 방식을 지칭하는 용어는 "이벤트 위임"과 "바인딩"이다. "이벤트 위임"은 상위 요소에 이벤트를 바인딩하고, 하위 요소에서 발생한 이벤트를 상위요소에서 처리는 것을 의미한다. 반면에 "바인딩"은 직접적으로 이벤트를 특정요소에 바인딩하는 것을 의미한다.
이벤트 위임과 직접적인 바인딩 방식을 나눠서 사용하는 이유
1. 성능향상
이벤트 위임은 하나의 상위 요소에 이벤트를 바인딩하여 여러 하위 요소들에 대한 이벤트를 처리한다. 이로 인해 DOM에 이벤트 핸들러가 적게 등록되어 메모리 사용량을 줄이고, 페이지 로딩 및 이벤트 처리 속도를 향상시킬 수 있다. 특히 많은 수의 요소에 이벤트를 적용할 때 유용하다.
반면 직접적인 바인딩 방식은 각 요소에 개별적으로 이벤트 핸들러를 등록하기 때문에 요소의 수가 많을수록 성능에 부담을 줄 수 있다.
2. 동적 요소 처리
이벤트 위임은 동적으로 생성되는 요소에 대해서도 적용될 수 있다. 상위 요소에 이벤트를 바인딩하기 때문에 새로 추가된 하위 요소들에 대해서도 동일한 이벤트가 적용된다. 이는 JavaScript로 요소를 동적으로 추가하거나 제거할 때 유용하다.
반면에 직접적인 바인딩 방식은 동적으로 생성되는 요소에 대해 새로운 이벤트 핸들러를 개별적으로 등록해야 한다.
3. 코드 간결성과 유지보수성
이벤트 위임은 코드를 간결하게 유지할 수 있다. 하나의 상위 요소에 이벤트를 바인딩하고, 해당 요소를 통해 여러 하위 요소들을 처리할 수 있기 때문이다.
직접적인 바인딩 방식은 각 요소에 개별적으로 이벤트 핸들러를 등록해야 하기 때문에 코드가 더 복잡해지고 유지보수가 어려워질 수 있다.
정리하면
특적 요소에만 적용해야 하는경우 : 직접 바인딩
여러 요소에 이벤트르르 적용해야 하는 경우 : 이벤트 위임
모든 하위 요소에 동일한 이벤트 처리 로직이 적용되는 경우 : 이벤트 위임
각 요소마다 다른 처리 로직이 필요한 경우 : 직접 바인딩
동적으로 생성되는 요소의 경우 : 이벤트 위임
하지만 상황에 따라 동적으로 생성된 요소에 대한 이벤트 처리가 필요한 경우 직접 바인딩이 더 편리 할 수 있다.
특정 프레인 워크나 라이브러리에서 이벤트 위임을 지원하지 않거나 제한적으로 지원하는 경우가 있다.