HTML DOM createEvent() 메서드

<시간/>

HTML DOM createEvent() 메소드는 매개변수에 유형이 지정되는 이벤트 객체를 생성하는 데 사용됩니다. 생성된 이벤트는 사용하기 전에 초기화되어야 합니다. 이벤트를 HTML 요소로 전달하려면 지정된 노드에서 dispatchEvent() 메서드를 사용해야 합니다.

구문

다음은 HTML DOM createEvent() 메서드의 구문입니다. -

document.createEvent( eventType )

여기서 string형 타입의 eventType은 필수 파라미터이다. 이벤트 유형은 AnimationEvent, ClipboardEvent, DragEvent, FocusEvent, HashChangeEvent, InputEvent, KeyboardEvent, MouseEvent, PageTransitionEvent, PopStateEvent, ProgressEvent, StorageEvent, TouchEvent, TransitionEvent, UiEvent, WheelEvent로 나열됩니다.

예시

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>
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM createEvent() 메서드

"Simulate Mouse Out"을 클릭하거나 현재 단락 밖으로 마우스를 가져갈 때 즉, 마우스를

요소의 내부에서 외부로 몇 번 가져오는 경우 -

HTML DOM createEvent() 메서드

위의 예에서 -

일부 스타일이 적용된 단락을 생성했으며 마우스가 해당 요소에서 나오면 addText() 메서드를 실행합니다.

p{
   border:solid 1px blue;
   background-color:lightgreen;
}
<p onmouseout="addText()" id="PAR1">This is a sample paragraph</p>

그런 다음 사용자가 클릭하면 eventAdd() 메서드를 실행하는 "마우스 아웃 시뮬레이션" 버튼을 만들었습니다.

<button onclick="eventAdd()">Simulate Mouse Out</button>

addText() 메서드는 문서 객체의 getElementById() 메서드를 사용하여 단락 요소를 가져옵니다. 그런 다음 innerHTML 속성 −

을 사용하여 "텍스트" + 변수 i를 추가합니다.

function addText(){
   var txt=document.getElementById("PAR1");
   txt.innerHTML+=" TEXT"+i;
   i++;
}

eventAdd() 메서드는 문서 객체의 createEvent() 메서드를 사용하여 "MouseEvent" 유형의 이벤트를 생성합니다. 그런 다음 event name=”mouseout” bubbling=true 및 cancellable=true 매개변수를 사용하여 마우스 이벤트를 초기화합니다.

그런 다음 단락 노드의 dispatchEvent() 메서드를 사용하여 생성한 "MouseEvent"를

요소에 전달합니다.

요소는 이제 이벤트 리스너로 작동합니다 -

function eventAdd() {
   var x = document.createEvent("MouseEvent");
   x.initMouseEvent("mouseout", true, true);
   document.getElementById("PAR1").dispatchEvent(x);
}