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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 39+ | ● 55+ | × | × | × | ● 26+ | × | × |
関連記事
- MediaQueryListEvent.media
- mediaは、MediaQueryListEventのプロパティです。クエリを返します。
- MediaQueryListEvent.matches
- matchesは、MediaQueryListEventのプロパティです。メディアクエリの条件に一致しているか否かを返します。
- MediaQueryListEvent
- MediaQueryListEventは、MediaQueryListのchangeイベントで取り扱われるインターフェイスです。
- MediaQueryList
- MediaQueryListは、メディアクエリを管理するための機能を備えたインターフェイスです。