Phương thức HTML DOM createEvent() được dùng để tạo một đối tượng sự kiện có loại 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. Để 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
Cú pháp sau đây dùng cho phương thức HTML DOM createEvent():
document.createEvent(eventType)
Ở đây, eventType kiểu chuỗi là tham số bắt buộc. Các loại sự kiện được liệt kê như: AnimationEvent, ClipboardEvent, DragEvent, FocusEvent, HashChangeEvent, InputEvent, KeyboardEvent, MouseEvent, PageTransitionEvent, PopStateEvent, ProgressEvent, StorageEvent, TouchEvent, TransitionEvent, UiEvent, WheelEvent.
Ví dụ
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>Ví dụ createEvent()</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">Đây là một đoạn văn mẫu</p> <button onclick="eventAdd()">Mô phỏng Mouse Out</button> </script> </body> </html>Kết quả
Điều này sẽ tạo ra kết quả sau:
Khi nhấn "Mô phỏng Mouse Out" hoặc di chuột ra khỏi đoạn văn hiện tại, tức là đưa chuột từ bên trong ra ngoài phần tử <p> một vài lần:
Trong ví dụ trên:
Chúng ta đã tạo một đoạn văn với một số kiểu dáng được áp dụng cho nó và khi chuột ra khỏi phần tử đó, nó thực thi phương thức addText().
p{ border:solid 1px blue; background-color:lightgreen; } <p onmouseout="addText()" id="PAR1">Đây là một đoạn văn mẫu</p>Chúng ta đã tạo nút "Mô phỏng mouse out" thực thi phương thức eventAdd() khi được nhấp bởi người dùng.
<button onclick="eventAdd()">Mô phỏng Mouse Out</button>
Phương thức addText() lấy phần tử đoạn văn bằng phương thức getElementById() của đối tượng document. Sau đó nó nối thêm "TEXT" + biến i vào nó bằ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 phương thức createEvent() của đối tượng document. Sau đó nó khởi tạo sự kiện chuột với các tham số: tên sự kiện="mouseout", bong bóng (bubbling)=true và có thể hủy (cancellable)=true.
Chúng ta sau đó gửi sự kiện "MouseEvent" mà chúng ta đã tạo đến phần tử <p> bằng phương thức dispatchEvent() trên nút đoạn văn. Phần tử <p> sẽ giờ đây hành động như một trình lắng nghe sự kiện:
function eventAdd() { var x = document.createEvent("MouseEvent"); x.initMouseEvent("mouseout", true, true); document.getElementById("PAR1").dispatchEvent(x); }