[JavaScript] 이벤트 생성 및 트리거 하기

오늘은 이벤트 생성하여 트리거 하는 방법에 대해 알아보도록 하겠습니다.

 

일반적으로 이벤트는 브라우저가 알아서 처리를 해주는 구조입니다. 예를 들어, 개발자가 Div에 Click 이벤트를 추가했다면, 브라우저가 해당 Div가 Click 된 것을 감지하여 Click 이벤트 핸들러를 호출해주는 구조입니다.

 

그렇다면, 실제로 Click이 발생하지 않았지만, 이벤트 핸들러를 호출하고 싶다면 어떻게 해야할까요? 그 방법에 대해 알아보겠습니다.

 

 

제가 JSFiddle을 이용해 샘플을 만들어보았습니다.

Div와 Button이 하나씩 있습니다. Div에는 Click 이벤트를 등록해 놓았고, Div가 Click되면 'Clicked Div!'라는 메세지를 포함한 Alert창이 출력됩니다.

 

Button에는 onclick으로 onButton 함수가 호출되도록 했습니다. 그럼 onButton 함수를 살펴보겠습니다.

var event = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
});
  
clickDiv.dispatchEvent(event);

onButton 함수 내부는 먼저 MouseEvent 객체를 생성하는 부분이 있습니다. 이 이벤트 객체가 이벤트 핸들러에 파라매터로 전달된다고 생각하시면 됩니다. 그리고 생성 후에 dispatchEvent를 통해 생성된 마우스 이벤트 객체를 전달합니다. 이벤트 객체가 어떤 객체인지 파악하여 해당 이벤트가 호출되는 것을 확인할 수 있습니다.

 

 

단, IE의 경우 MouseEvent Contructor가 존재하지 않아 에러가 발생하게 됩니다. IE에서 문제없이 동작하기 위해서는 아래와 같이 document.createEvent 함수와 initEvent 함수를 이용하면 동일하게 처리가 가능합니다.

var event = document.createEvent('click');
event.initEvent('click', true, true);
clickDiv.dispatchEvent(event);