Event() - コンストラクタ
Event()は、Eventのコンストラクタです。新しいオブジェクトを作成します。
概要
- 名前
- Event
- 所属
- Event
- IDL
Constructor(DOMString type, optional EventInit eventInitDict) dictionary EventInit { boolean bubbles = false; boolean cancelable = false; boolean composed = false; };
- 仕様書
- https://dom.spec.whatwg.org/#dom-event-event
説明
第1引数(type)には、イベントの種類を表す文字列を指定します。
第2引数(eventInitDict)には、オブジェクトの各値をオブジェクトで定義します。指定できる固有のキーは下記の通りです。MouseEvent()のキーを継承しています。
- bubbles
- bubblesの値。初期値はfalse。
- cancelable
- cancelableの値。初期値はfalse。
- composed
- composedの値。初期値はfalse。
チュートリアル
コンストラクタでEventを作成する例です。EventTarget.dispatchEvent()の引数にすれば、擬似的にイベントを発生させることができます。
var event = new Event( "wheel", {
bubbles: false ,
cancelable: false ,
composed: false ,
} ) ;
element.dispatchEvent( event ) ;
デモ
Event()のデモです。ボタンをクリックすると、wheelイベントのオブジェクトを作成して擬似的にイベントを発火させます。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
height: 240px ;
line-height: 240px ;
background-color: #d36015 ;
font-weight: 700 ;
text-align: center ;
color: #fff ;
}
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<button id="create">イベントを作成</button>
<hr>
<div id="hoge">please wheel !</div>
<hr>
<p>wheelの発生回数→<span id="count">0</span></p>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
element.addEventListener( "wheel", getEventInfo ) ;
var number = 0 ;
document.getElementById( "create" ).onclick = function () {
var event = new Event( "wheel", {
bubbles: false ,
cancelable: false ,
composed: false ,
} ) ;
element.dispatchEvent( event ) ;
}
function getEventInfo( event ) {
event.preventDefault() ;
document.getElementById( "result" ).textContent = "" ;
document.getElementById( "count" ).textContent = ++number ;
console.log( event ) ;
appendText( event + "\n" ) ;
appendText( "bubbles: " + event.bubbles + "\n" ) ;
appendText( "cancelable: " + event.cancelable + "\n" ) ;
appendText( "composed: " + event.composed + "\n" ) ;
}
function appendText ( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | × | ● | ● | ● 4.4+ |
関連記事
- Event
- Eventは、イベントの内容を確認したり、変更するための機能を備えたインターフェイスです。
- Event.initEvent()
- initEvent()は、Eventのメソッドです。Document.createEvent()で作成したイベントを初期化します。
- Event.isTrusted
- isTrustedは、Eventのプロパティです。イベントがユーザーの操作により発生したか否かを返します。例えばclickイベントが、ユーザーがクリック操作をして発生した場合はtrue、EventTarget.dispatchEvent()など、スクリプトで発生させた場合はfalseを返します。
- Event.eventPhase
- eventPhaseは、Eventのプロパティです。現在のイベントフェイズを表す数値を返します。この数値は定数に対応しています。