Phương thức HTML DOM createEvent ()

Phương thức HTML DOM createEvent () được sử dụng để tạo một đối tượng sự kiện có kiểu sẽ được chỉ định trong tham số. Sự kiện được tạo phải được khởi tạo trước khi sử dụng nó. Để gửi sự kiện đến một phần tử HTML, bạn phải sử dụng phương thức DispatchEvent () trên nút được chỉ định đó.

Cú pháp

Sau đây là cú pháp cho phương thức HTML DOM createEvent () -

document.createEvent( eventType )

Ở đây, eventType của kiểu chuỗi là một tham số bắt buộc. Loại sự kiện được liệt kê là:AnimationEvent, ClipboardEvent, DragEvent, FocusEvent, HashChangeEvent, InputEvent, KeyboardEvent, MouseEvent, PageTransitionEvent, PopStateEvent, ProgressEvent, StorageEvent, TouchEvent, TransitionEvent, UiEvent, WheelEvent.

Ví dụ

Chúng ta hãy xem một ví dụ cho phương thức 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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phương thức HTML DOM createEvent ()

Khi nhấp vào “Mô phỏng Mouse Out” hoặc di chuột ra khỏi đoạn hiện tại, tức là đưa chuột từ trong ra ngoài phần tử

một vài lần -

Phương thức HTML DOM createEvent ()

Trong ví dụ trên -

Chúng tôi đã tạo một đoạn văn với một số kiểu được áp dụng cho nó và khi con chuột thoát ra khỏi phần tử đó, nó sẽ thực thi phương thức addText ().

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

Sau đó, chúng tôi đã tạo một nút “Mô phỏng chuột ra ngoài” thực thi phương thức eventAdd () khi được người dùng nhấp vào.

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

Phương thức addText () nhận phần tử đoạn bằng phương thức getElementById () của đối tượng tài liệu. Sau đó, nó gắn biến “Văn bản” + i vào nó bằng cách sử dụng thuộc tính innerHTML -

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

Phương thức eventAdd () tạo một sự kiện kiểu “MouseEvent” bằng cách sử dụng phương thức createEvent () của đối tượng tài liệu. Sau đó, nó khởi tạo sự kiện chuột với các tham số, event name =”mouseout” bubbling =true và cancellable =true.

Sau đó, chúng tôi gửi “MouseEvent” mà chúng tôi đã tạo đến phần tử

bằng cách sử dụng phương thức acceptEvent () trên nút đoạn. Phần tử

bây giờ sẽ hoạt động như một trình xử lý sự kiện -

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