jsでレスポンシブ時のresizeイベントと起動イベントの処理をまとめたい

Question

レスポンシブ対応で現状resize時と起動時の処理を別々に書いているのですが
こちら纏めることできますでしょうか？
処理内容は同じなので纏めたいのですが

window.addEventListener('DOMContentLoaded', function(){
  if (window.matchMedia( '(min-width: 992px)' ).matches) {
ここに言語を入力
    document.querySelector('.file').classList.add('filePC');
    //console.log("起動時の処理1");
    }else{
    document.querySelector('.file').classList.add('fileSP');
    //console.log("起動時の処理2");
    }
});


window.addEventListener("resize", function(){
  if (window.matchMedia( '(min-width: 992px)' ).matches) {
    document.querySelector('.file').classList.add('filePC');
    //console.log("リサイズ時の処理1");
    }else{
    document.querySelector('.file').classList.add('fileSP');
    //console.log("リサイズ時の処理2");
    }
});

Answer 1

window.addEventListener('DOMContentLoaded',e=>{
  const ce = new CustomEvent("HTMLEvents");
  ce.initEvent('resize', true, true );
  window.dispatchEvent(ce);
});
window.addEventListener("resize", e=>{
  console.log(e.type);
});

Comments

[m.ts10806]

これは便利だ

Answer 2

第２引数に入れるのは「関数」なので、それを個別に書くのではなく外出しして関数定義すれば良いと思います。
※jQueryだと複数イベントをハンドルできますが、Vanillaではできません。

const callback = function(){
  if (window.matchMedia( '(min-width: 992px)' ).matches) {
    document.querySelector('.file').classList.add('filePC');
    //console.log("リサイズ時の処理1");
    }else{
    document.querySelector('.file').classList.add('fileSP');
    //console.log("リサイズ時の処理2");
    }
}

window.addEventListener('DOMContentLoaded', callback );
window.addEventListener('resize', callback );

MDNも参考に。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

Comments

[nanashissss]

丁寧にありがとうございます。
解決致しました。
MDNも確認します。

[m.ts10806]

MDNの仕様文面から自身で「こういうこともできるのではないか」と発想を広げるのも必要です。