HTML DOM createEvent() 方法
HTML DOM createEvent() 方法用于创建一个事件对象，其类型将在参数中指定。创建的事件必须在使用前初始化。要将事件分派到 HTML 元素，您必须在指定的节点上使用 dispatchEvent() 方法。
语法
以下是 HTML DOM createEvent() 方法的语法 −
document.createEvent( eventType )
其中，字符串类型的 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>
输出
这将产生以下输出 −
点击"模拟鼠标移出"或鼠标移出当前段落，即将鼠标从 <p> 元素内部移到外部几次 −
在上面的例子中 −
我们创建了一个段落并应用了一些样式，当鼠标移出该元素时，它会执行 addText() 方法。
p{
border:solid 1px blue;
background-color:lightgreen;
}
<p onmouseout="addText()" id="PAR1">这是一个示例段落</p>
然后，我们创建了一个"模拟鼠标移出"按钮，当用户点击该按钮时，它会执行 eventAdd() 方法。
<button onclick="eventAdd()">模拟鼠标移出</button>
addText() 方法使用 document 对象的 getElementById() 方法获取段落元素。然后，它使用其 innerHTML 属性将"Text"+ 变量 i 附加到该段落元素上 −
function addText(){
var txt=document.getElementById("PAR1");
txt.innerHTML+=" TEXT"+i;
i++;
}
eventAdd() 方法使用 document 对象的 createEvent() 方法创建一个类型为 “MouseEvent” 的事件。然后，它使用参数 event name=”mouseout”、bubbling=true 和 cancellable=true 初始化鼠标事件。
然后，我们使用段落节点上的 dispatchEvent() 方法将创建的 “MouseEvent” 调度到 <p> 元素。<p> 元素现在将充当事件监听器 −
function eventAdd() {
var x = document.createEvent("MouseEvent");
x.initMouseEvent("mouseout", true, true);
document.getElementById("PAR1").dispatchEvent(x);
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
