JavaScript에서 onchange(change) 이벤트를 수동으로 트리거하는 방법

dispatchEvent 메서드로 change 이벤트 직접 실행하기

JavaScript에서는 dispatchEvent 메서드를 사용하면 개별 DOM 요소에 이벤트를 코드로 직접 발생시킬 수 있습니다. 예를 들어, change 이벤트가 연결된 input 요소가 있다고 가정해 보겠습니다.

<input id="test" type="text" />

1. 이벤트 핸들러 등록

먼저 해당 요소에 change 이벤트 리스너를 등록합니다.

document.querySelector('#test').addEventListener('change', () =>
  console.log("Changed!"));

2. 이벤트 수동으로 트리거하기

이벤트를 수동으로 실행하려면 Event 생성자로 새 이벤트 객체를 만든 뒤, 대상 요소의 dispatchEvent 메서드에 전달하면 됩니다.

const e = new Event("change");
const element = document.querySelector('#test');
element.dispatchEvent(e);

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

Changed!

참고 사항

new Event("change")로 생성한 이벤트는 기본적으로 버블링되지 않습니다. 상위 요소까지 이벤트가 전파되도록 하려면 다음과 같이 옵션을 지정할 수 있습니다.

const e = new Event("change", { bubbles: true });

또한 React처럼 value 속성을 제어하는 라이브러리 환경에서는 단순히 이벤트만 발생시키면 값 변경이 감지되지 않을 수 있으므로, 네이티브 setter를 활용해 값을 설정한 후 이벤트를 디스패치해야 하는 경우도 있습니다.