[jQuery] jQuery 이벤트 드리블링과 이벤트 핸들러
이번 포스트에서는 jQuery를 사용하여 이벤트 드리블링(event delegation)과 이벤트 핸들러(event handler)에 대해 알아보겠습니다.
이벤트 드리블링
이벤트 드리블링은 동적으로 생성된 요소에 이벤트 핸들러를 바인딩하기 위한 기술입니다. 일반적으로 on()
메서드를 사용하여 부모 요소에 이벤트를 바인딩하고, 이벤트가 발생한 요소를 필터링하여 처리합니다.
$(부모요소).on('이벤트', '하위선택자', 함수);
이렇게 하면 새로 추가되거나 동적으로 생성된 하위 요소에도 이벤트 핸들러가 적용됩니다.
이벤트 핸들러
이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수를 말합니다. jQuery에서는 on()
, click()
, keyup()
등의 메서드를 사용하여 이벤트 핸들러를 등록할 수 있습니다.
$(선택자).on('이벤트', 함수);
$(선택자).click(함수);
$(선택자).keyup(함수);
이벤트 핸들러를 사용하여 버튼 클릭, 키 입력 등의 이벤트에 대한 동작을 정의할 수 있습니다.
이제 jQuery를 사용하여 이벤트 드리블링과 이벤트 핸들러를 효과적으로 활용하여 웹 애플리케이션을 만들어 보세요!
본 포스트는 jQuery 공식 문서를 참고하여 작성되었습니다.
참고 문서:
jQuery 공식 문서 - https://api.jquery.com/category/events/