HTML DOM의 createEvent() 메서드는 매개변수로 지정된 타입의 이벤트 객체를 생성하는 데 사용됩니다. 이렇게 생성된 이벤트는 실제로 사용하기 전에 반드시 초기화(initialize) 과정을 거쳐야 하며, 특정 HTML 요소에 이벤트를 전달(dispatch)하려면 해당 노드에서 dispatchEvent() 메서드를 호출해야 합니다.
문법(Syntax)
HTML DOM createEvent() 메서드의 기본 문법은 다음과 같습니다.
document.createEvent( eventType )
여기서 eventType은 문자열(string) 타입의 필수 매개변수입니다. 지정할 수 있는 이벤트 타입은 다음과 같습니다.
- AnimationEvent
- ClipboardEvent
- DragEvent
- FocusEvent
- HashChangeEvent
- InputEvent
- KeyboardEvent
- MouseEvent
- PageTransitionEvent
- PopStateEvent
- ProgressEvent
- StorageEvent
- TouchEvent
- TransitionEvent
- UiEvent
- WheelEvent
예제(Example)
createEvent() 메서드의 실제 동작 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<style>
p{
border:solid 1px blue;
background-color:lightgreen;
}
</style>
<h2>createEvent() example</h2>
<script>
var i=0;
function eventAdd() {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseout", true, true);
document.getElementById("PAR1").dispatchEvent(x);
}
function addText(){
var txt=document.getElementById("PAR1");
txt.innerHTML+=" TEXT"+i;
i++;
}
</script>
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>
<button onclick="eventAdd()">Simulate Mouse Out</button>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"Simulate Mouse Out" 버튼을 클릭하거나, 마우스를 <p> 요소 안에서 밖으로 여러 번 이동시키면 아래와 같이 텍스트가 계속 추가되는 것을 확인할 수 있습니다.
코드 상세 분석
위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.
1. 스타일 및 이벤트 리스너 설정
먼저 파란색 테두리와 연한 초록색 배경 스타일이 적용된 문단(paragraph)을 만들고, 마우스가 해당 요소에서 벗어나면 addText() 함수가 실행되도록 onmouseout 이벤트 핸들러를 등록했습니다.
p{
border:solid 1px blue;
background-color:lightgreen;
}
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>
2. 버튼 생성
사용자가 클릭하면 eventAdd() 함수를 실행하는 "Simulate mouse out" 버튼을 만들었습니다. 이 버튼을 통해 실제 마우스 조작 없이도 이벤트를 강제로 발생시킬 수 있습니다.
<button onclick="eventAdd()">Simulate Mouse Out</button>
3. addText() 함수 – 텍스트 추가
addText() 함수는 document 객체의 getElementById() 메서드로 문단 요소를 가져온 뒤, innerHTML 속성을 이용해 "TEXT" + 변수 i 값을 문단 끝에 덧붙입니다.
function addText(){
var txt=document.getElementById("PAR1");
txt.innerHTML+=" TEXT"+i;
i++;
}
4. eventAdd() 함수 – 이벤트 생성 및 전달
eventAdd() 함수는 document 객체의 createEvent() 메서드를 사용해 "MouseEvent" 타입의 이벤트 객체를 생성합니다. 그다음 initMouseEvent()로 이벤트 이름은 "mouseout", 버블링(bubbling)은 true, 취소 가능(cancellable) 여부는 true로 설정하여 마우스 이벤트를 초기화합니다.
마지막으로 문단 노드에서 dispatchEvent() 메서드를 호출해 생성된 MouseEvent를 <p> 요소에 전달합니다. 이 순간 <p> 요소는 이벤트 리스너(event listener)처럼 동작하게 됩니다.
function eventAdd() {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseout", true, true);
document.getElementById("PAR1").dispatchEvent(x);
}
정리
createEvent() 메서드는 자동화 테스트나 사용자 인터랙션 시뮬레이션에서 유용하게 활용됩니다. 다만 최신 웹 표준에서는 initMouseEvent() 같은 초기화 메서드 대신 new MouseEvent()와 같은 생성자 방식을 사용하는 것이 권장되므로, 새 프로젝트에서는 Event 생성자를 우선 고려하는 것이 좋습니다.