HTML - DOM文件 createEvent() 方法

HTML DOM文件的createEvent()方法用於建立一個事件物件，其事件型別在引數中指定。建立的事件必須在使用前進行初始化。

語法

document.createEvent(type);

引數

它接受一個引數，如下所示。

引數	描述
type	這是一個必需引數。它代表各種事件型別。 AnimationEvent ClipboardEvent DragEvent FocusEvent HashChangeEvent InputEvent KeyboardEvent MouseEvent PageTransitionEvent PopStateEvent ProgressEvent StorageEvent TouchEvent TransitionEvent UiEvent WheelEvent

返回值

它返回建立的事件物件。

HTML DOM 文件 'createEvent()' 方法示例

以下示例說明了 createEvent 方法的實現。

建立 MouseOut 和 Click 事件

在以下示例中，演示了兩種型別的事件——單擊和滑鼠移出。單擊事件計算滑鼠單擊次數，滑鼠移出事件計算滑鼠移出綠色區域的次數。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM document createEvent() Method</title>
    <style>
        p {
            background-color: green;
            height: 100px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>HTML DOM document createEvent() Method</h3>
    <p onmouseout="textFun()" id="txt">Simulate Mouse Out</p>
    <button onclick="eventFun()">Click me</button>
    <script>
        let i = 0;
        function eventFun() {
            let x = document.createEvent("MouseEvent");
            x.initMouseEvent("mouseout", true, true);
            document.getElementById("txt").dispatchEvent(x);
        }
        function textFun() {
            let txt = document.getElementById("txt");
            txt.innerHTML += "TEXT" + i;
            i++;
        }
    </script>
</body>
</html>

建立 mouseover 事件

在以下示例中，建立了 mouseover 事件，它計算滑鼠移入綠色區域的次數。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM document createEvent() Method</title>
    <style>
        p {
            background-color: green;
            height: 100px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>HTML DOM document createEvent() Method</h3>
    <p onmouseover="textFun()" id="txt">Simulate Mouse Over</p>
    <button onclick="eventFun()">Click me</button>
    <script>
        let i = 0;
        function eventFun() {
            let x = document.createEvent("MouseEvent");
            x.initMouseEvent("mouseover", true, true);
            document.getElementById("txt").dispatchEvent(x);
        }
        function textFun() {
            let txt = document.getElementById("txt");
            txt.innerHTML += "TEXT" + i;
            i++;
        }
    </script>
</body>
</html>

支援的瀏覽器

方法
createEvent()	是 1	是 12	是 1	是 1	是 7

列印頁面