JavaScript에서 이벤트를 트리거하는 방법 – jQuery trigger() 메서드 완벽 가이드

trigger() 메서드란 무엇인가?

jQuery의 trigger() 메서드는 선택한 요소에 지정된 이벤트를 강제로 발생시키는 기능을 합니다. 사용자가 직접 클릭하거나 입력하지 않아도, 코드 실행만으로 해당 이벤트와 그에 따른 기본 동작(예: 폼 제출)까지 함께 실행할 수 있습니다.

trigger() 기본 사용 예제

다음 예제는 #foo 요소에 클릭 이벤트 핸들러를 등록한 후, trigger() 메서드를 사용해 클릭 이벤트를 프로그래밍 방식으로 발생시키는 코드입니다.

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});

$( "#foo" ).trigger( "click" );

코드 동작 설명

위 코드가 실행되면 다음과 같은 순서로 동작합니다.

1. on("click", ...)을 통해 #foo 요소에 클릭 이벤트 리스너가 등록됩니다.
2. trigger("click")이 호출되는 순간, 실제로 마우스를 클릭하지 않아도 클릭 이벤트가 자동으로 발생합니다.
3. 결과적으로 alert 창이 뜨면서 #foo 요소의 텍스트 내용이 화면에 표시됩니다.

trigger() 메서드의 주요 특징

- 기본 동작까지 실행: 단순히 이벤트 핸들러만 호출하는 것이 아니라, 링크 이동이나 폼 제출 같은 브라우저의 기본 동작도 함께 수행합니다.
- 커스텀 이벤트 지원: click, submit 같은 표준 이벤트뿐 아니라 개발자가 정의한 커스텀 이벤트도 트리거할 수 있습니다.
- 데이터 전달 가능: 두 번째 인수를 사용해 이벤트 핸들러에 추가 데이터를 넘길 수 있습니다.

정리

JavaScript와 jQuery에서 이벤트를 코드로 강제 실행해야 할 때는 trigger() 메서드를 활용하면 됩니다. 버튼 클릭을 시뮬레이션하거나, 폼을 자동으로 제출하거나, 커스텀 이벤트 흐름을 만들 때 매우 유용하게 사용할 수 있습니다.