EventTarget.dispatchEvent() - イベントの発火
dispatchEvent()は、EventTargetのメソッドです。ターゲットに対して、任意のイベントを発生させます。
概要
- 名前
- dispatchEvent
- 所属
- EventTarget
- IDL
boolean dispatchEvent(Event event);
- 仕様書
- https://dom.spec.whatwg.org/#dom-eventtarget-dispatchevent
説明
引数(event)には、発火させたいEventを指定して下さい。
チュートリアル
clickイベントを発火する例です。
<button id="hoge">ここをクリック</button>
// 要素を取得する
var element = document.getElementById( "hoge" ) ;
// イベントを作成する (clickイベント)
var event = new MouseEvent( "click" ) ;
// 要素にclickイベントを発生させる
element.dispatchEvent( event ) ;
デモ
EventTarget.dispatchEvent()のデモです。ボタンにはclickイベントが設定されています。あらかじめ、dispatchEvent()で5回ほど、イベントを発生させました。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result {
white-space: pre-wrap ;
}
</style>
</head>
<body>
<button id="hoge">実行</button>
<hr>
<div id="result">0</div>
<script>
/** try it! **/
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;
element.addEventListener( "click", function ( event ) {
console.log( event ) ;
resultElement.textContent = Number( resultElement.textContent ) + 1 ;
} ) ;
element.dispatchEvent( new MouseEvent( "click" ) ) ;
element.dispatchEvent( new MouseEvent( "click" ) ) ;
element.dispatchEvent( new MouseEvent( "click" ) ) ;
element.dispatchEvent( new MouseEvent( "click" ) ) ;
element.dispatchEvent( new MouseEvent( "click" ) ) ;
/** try it! **/
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- EventTarget
- EventTargetは、イベントを設定するための機能を備えたインターフェイスです。NodeやElement、Document、Windowなど、イベントを設定できるインターフェイスがこれを継承しています。
- CompositionEvent()
- CompositionEvent()は、CompositionEventのコンストラクタです。新しいオブジェクトを作成します。
- KeyboardEvent()
- KeyboardEvent()は、KeyboardEventのコンストラクタです。新しいオブジェクトを作成します。
- DocumentFragment
- DocumentFragmentは親を持たないドキュメントです。このフラグメント内にある複数のノードを、ドキュメントに一度に追加することができます。フラグメント内のノードに変更を加えてもドキュメントには反映されず、パフォーマンス上でもメリットがあります。