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

打印页面