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>

输出

这将产生以下输出 -

单击 “Simulate Mouse Out” 或鼠标离开当前段落，即将鼠标从 <p> 元素的内部移到外部几次 -

在上面的例子中 -

我们创建了一个应用了一些样式的段落，当鼠标离开该元素时，它会执行 addText() 方法。

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

然后我们创建了一个按钮 “Simulate mouse out”，它在用户点击时执行 eventAdd() 方法。

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

addText() 方法使用文档对象的 getElementById() 方法获取段落元素。然后使用其 innerHTML 属性将 “Text” + 变量 i 附加到它 -

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

eventAdd() 方法使用文档对象的 createEvent() 方法创建 “MouseEvent” 类型的事件。然后它使用参数初始化鼠标事件，事件名称=”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);
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM createEvent() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。