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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。