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

MediaQueryListEvent() - コンストラクタ

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

概要

名前
MediaQueryListEvent
所属
MediaQueryListEvent
IDL
Constructor(CSSOMString type, optional MediaQueryListEventInit eventInitDict)

dictionary MediaQueryListEventInit : EventInit {
  CSSOMString media = "";
  boolean matches = false;
};

typedef USVString CSSOMString;

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};
仕様書
https://drafts.csswg.org/cssom-view/#dom-mediaquerylistevent-mediaquerylistevent

説明

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

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

media
mediaの値。初期値は""。説明はMediaQueryList.mediaを参照。
matches
matchesの値。初期値はfalse。説明はMediaQueryList.matchesを参照。

チュートリアル

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

var mediaQueryList = matchMedia( "(max-width: 270px)" ) ;

var event = new MediaQueryListEvent( "change", {
	media: mediaQueryList.media ,
	matches: true ,
} ) ;

mediaQueryList.dispatchEvent( event ) ;

デモ

MediaQueryListEvent()のデモです。ボタンをクリックすると、オブジェクトを作成して擬似的にイベントを発火させます。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><button id="true">matches=trueで作成</button></p>
<p><button id="false">matches=falseで作成</button></p>
<hr>
<div id="result"></div>
<script>
var mediaQueryList = matchMedia( "(max-width: 270px)" ) ;
mediaQueryList.addListener( getMediaQueryListInfo ) ;

document.getElementById( "true" ).onclick = function () {
	var event = new MediaQueryListEvent( "change", {
		media: mediaQueryList.media ,
		matches: true ,
	} ) ;
	mediaQueryList.dispatchEvent( event ) ;
}

document.getElementById( "false" ).onclick = function () {
	var event = new MediaQueryListEvent( "change", {
		media: mediaQueryList.media ,
		matches: false ,
	} ) ;
	mediaQueryList.dispatchEvent( event ) ;
}

function getMediaQueryListInfo( event ) {
	document.getElementById( "result" ).textContent = "" ;

	console.log( event ) ;

	appendText( event + "\n" ) ;
	appendText( "media: " + event.media + "\n" ) ;
	appendText( "matches: " + event.matches + "\n\n" ) ;

	if ( event.matches ) {
		appendText( "メディアクエリの条件を満たしています。" ) ;
		document.body.style.backgroundColor = "#fee" ;
	} else {
		appendText( "メディアクエリの条件を満たしていません。" ) ;
		document.body.style.backgroundColor = "#eef" ;
	}
}

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

サポート状況

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