addListenerはmatchmedia APIとどのように連携しますか？

Question

matchMedia("(min-width: 500px)").addListener(foo);は何をしますか？それはaddListener()の機能は何ですか？ビューポートの幅が変更されると、関数foo()が実行されますか？

Answer 1

はい、それはfoo機能

時にメディアクエリの評価を行った結果、変更を実行します。

は、あなたの場合は

（MDNから）これは、あなたが大きな幅をその500pxなどでウィンドウを起動します。次に、以下500pxなどにサイズを変更する場合は、関数が実行されることを意味します。後で幅を500pxより大きくするように後でサイズを変更すると、この関数は再び実行されます。

この関数は、最初の引数としてMediaQueryListEventで呼び出されます。ブール値matchesプロパティが含まれています。これは、メディアクエリが現在ビューポートと一致するかどうかを示します。

Answer 2

（trueからfalseまたはfalseからtrueのいずれかのメディアクエリー変化の評価リスナーfoo()が実行される。

matchMedia(...).addEventListener(foo)とwindow.onResize(foo)重要な違いがある。前者、foo()意志で後でfoo()がブラウザウィンドウのサイズが変わるたびに繰り返し実行されます。特定のブレークポイントをターゲットにしている場合は、他のロジックを実行する前にこれらをテストしてfoo()にする必要があります。

matchMedia(...).addEventListener(foo)ロジックを書くことで、ブラウザのディメンションやメディアクエリで評価できるその他の情報をテストするためのロジック（または他の関数呼び出し）を追加しなくても、より集中したロジックを書き込むことができます（foo()）。 foo()が実行頻度が低いという点でwindow.onResize(foo)よりもmatchMedia(...).addEventListener(foo)を使用すると、パフォーマンスが向上する可能性もあります。

免責事項：私は2つのアプローチの間で実際の性能比較を行っていません。私の前提は、実行されていないイベントハンドラは、それより速いという考えに基づいています。しかし、これは2つのアプローチの間のネイティブの違いを考慮に入れません。