[JavaScript]-カスタムイベントを作成するためのcreateEvent()

document.createEventは、イベントを作成するために使用されます。DOMレベル2イベントには、HTMLEvents、MouseEvents、およびUIEvents イベントタイプがあります。DOMレベル3は、多くのイベントタイプを追加します。

文法:

createEvent(eventType

パラメータ 説明
イベントタイプ 取得するEventオブジェクトのイベントモジュール名。

有効なイベントタイプのリストについては、「説明」セクションを参照してください。

戻り値

指定されたタイプの新しく作成された Event オブジェクトを返します。

説明する

このメソッドは、パラメーターeventTypeで指定された新しいイベントタイプを作成します  。このパラメーターの値は、作成するイベントインターフェイスの名前ではなく、そのインターフェイスを定義するDOMモジュールの名前であることに注意してください。

次の表に、  eventTypeの 有効な値と、各値によって作成されたイベントインターフェイスを示します。

パラメータ イベントインターフェース 初期化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIevent iniUIEvent()

このメソッドを使用してEventオブジェクトを作成した後、上記の表に示す初期化メソッドを使用してオブジェクトを初期化する必要があります。初期化メソッドの詳細について は、イベント オブジェクトリファレンスを参照してください。

このメソッドは、実際にはDocumentインターフェイスではなく、DocumentEventインターフェイスによって定義されます。実装がEventモジュールをサポートしている場合、DocumentオブジェクトはDocumentEventインターフェイスを実装し、このメソッドをサポートします。

DOM要素のカスタムイベントを作成する手順は次のとおりです。

1.イベントを作成します。letevent=document.createEvent('HTMLEvents');

次に、初期化イベント:

          // initEventは3つのパラメータを受け入れます:

          //イベントタイプ、バブルするかどうか、ブラウザのデフォルトの動作を防ぐかどうか

          event.initEvent( "mouseenter"、true、true);

3.イベントリスナーをDOMに追加します:lis [index] .addEventListener('custom event name'、function(){})

4.カスタムイベントを配布(トリガー)します。

          // mouseenter、mouseleaveイベントなど、イベントハンドルにバインドされたDOM要素でイベントをトリガーします。

          lis [index] .dispatchEvent(event);

 let event = document.createEvent('HTMLEvents');

event.initEvent("mouseenter", true, true);
     // initEvent接受3个参数:
     // 事件类型,是否冒泡,是否阻止浏览器的默认行为

lis[index].dispatchEvent(event);
     //触发lis[index]上绑定的mouseenter事件

おすすめ

転載: blog.csdn.net/m0_55960697/article/details/124144063