SYNCERのロゴ
アイキャッチ画像

WheelEvent() - コンストラクタ

WheelEvent()は、WheelEventのコンストラクタです。新しいオブジェクトを作成します。

概要

名前
WheelEvent
所属
WheelEvent
IDL
Constructor(DOMString type, optional WheelEventInit eventInitDict)

dictionary WheelEventInit : MouseEventInit {
  double deltaX = 0.0;
  double deltaY = 0.0;
  double deltaZ = 0.0;
  unsigned long deltaMode = 0;
};

dictionary MouseEventInit : EventModifierInit {
  long screenX = 0;
  long screenY = 0;
  long clientX = 0;
  long clientY = 0;

  short button = 0;
  unsigned short buttons = 0;
  EventTarget? relatedTarget = null;
};

partial dictionary MouseEventInit {
    long movementX = 0;
    long movementY = 0;
};

partial dictionary MouseEventInit {
  double screenX = 0.0;
  double screenY = 0.0;
  double clientX = 0.0;
  double clientY = 0.0;
};

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

dictionary UIEventInit : EventInit {
  Window? view = null;
  long detail = 0;
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};
仕様書
https://w3c.github.io/uievents/#dom-wheelevent-wheelevent

説明

第1引数(type)には、イベントの種類を表す文字列を指定します。

第2引数(eventInitDict)には、オブジェクトの各値をオブジェクトで定義します。指定できる固有のキーは下記の通りです。MouseEvent()のキーを継承しています。

deltaX
deltaXの値。初期値は0.0。
deltaY
deltaYの値。初期値は0.0。
deltaZ
deltaZの値。初期値は0.0。
repeat
deltaModeの値。初期値は0。

チュートリアル

コンストラクタでWheelEventを作成する例です。EventTarget.dispatchEvent()の引数にすれば、擬似的にイベントを発生させることができます。

var event = new WheelEvent( "wheel", {
	deltaX: 1 ,
	deltaY: 2 ,
	deltaZ: 3 ,
	deltaMode: 0 ,
} ) ;

element.dispatchEvent( event ) ;

デモ

WheelEvent()のデモです。ボタンをクリックすると、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 WheelEvent( "wheel", {
		deltaX: 1 ,
		deltaY: 2 ,
		deltaZ: 3 ,
		deltaMode: 0 ,
	} ) ;
	element.dispatchEvent( event ) ;
}

function getEventInfo( event ) {
	event.preventDefault() ;
	document.getElementById( "result" ).textContent = "" ;
	document.getElementById( "count" ).textContent = ++number ;

	console.log( event ) ;
	appendText( event + "\n" ) ;
	appendText( "deltaX: " + event.deltaX + "\n" ) ;
	appendText( "deltaY: " + event.deltaY + "\n" ) ;
	appendText( "deltaZ: " + event.deltaZ + "\n" ) ;
	appendText( "deltaMode: " + event.deltaMode + "\n" ) ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
26+ 17+ 7.1+× 15+ 7.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月24日 (火)
コンテンツを公開しました。