new Event()を使う練習も兼ねて、ブレイクポイントを通り過ぎた時だけ発火するイベントを作成しました。

resizeイベントだと、windowがリサイズされるたびに呼ばれますが、今回はブレイクポイントを通り過ぎた時だけに呼び出されるイベントを新たに作ります。

const crossEvent = new Event("cross");
const breakPoint = 750;
let viewedDevice = (window.innerWidth < breakPoint)?'mobile':'desktop';

window.addEventListener('resize',()=>{
  if( window.innerWidth < breakPoint && viewedDevice === 'desktop' ){
    viewedDevice = 'mobile';
    window.dispatchEvent(crossEvent);
  }else if( window.innerWidth >= breakPoint && viewedDevice === 'mobile' ){
    viewedDevice = 'desktop';
    window.dispatchEvent(crossEvent);
  }
});

window.addEventListener('cross',()=>{
  if( viewedDevice === 'desktop' ){
    // mobile表示からdesktop表示に変更した時
  }else if( viewedDevice === 'mobile'){
    // desktop表示からmobile表示に変更した時
  }
});

window.innerWidthが750未満から750以上、また750以上から750未満にリサイズされた時のみ、作成したイベント「cross」が発火します。

viewedDeviceがdesktopだった場合は、750以上にリサイズされており、mobileだった場合は750未満にリサイズされています。

上記のコードを作成した後に、わざわざviewedDeviceで分岐しなくても、

• viewedDeviceがdesktopに変更された時
• viewedDeviceがmobileに変更された時

それぞれでイベントを作成すればいいんじゃないかと思って制作したのが次のものです。

const changeDesktopEvent = new Event("changeDesktop");
const changeMobileEvent = new Event("changeMobile");
const breakPoint = 750;
let viewedDevice = (window.innerWidth < breakPoint)?'mobile':'desktop';

window.addEventListener('resize',()=>{
  if( window.innerWidth < breakPoint && viewedDevice === 'desktop' ){
    viewedDevice = 'mobile';
    window.dispatchEvent(changeMobileEvent);
  }else if( window.innerWidth >= breakPoint && viewedDevice === 'mobile' ){
    viewedDevice = 'desktop';
    window.dispatchEvent(changeDesktopEvent);
  }
});

// mobile表示からdesktop表示に変更した時
window.addEventListener('changeDesktop',()=>{

});
// desktop表示からmobile表示に変更した時
window.addEventListener('changeMobile',()=>{

});

元々、下記の記述はブレイクポイントを通り過ぎた時のみに処理をしたい時に使っていた記述です。

しかしjavascriptのコード量が多くなるにつれて、ブレイクポイントを通り過ぎた時の処理をすべて同じ箇所に書くのが困難になったので、今回のようなイベントを作成する方法を考えました。

const breakPoint = 750;
let viewedDevice = (window.innerWidth < breakPoint)?'mobile':'desktop';

window.addEventListener('resize',()=>{
  if( window.innerWidth < breakPoint && viewedDevice === 'desktop' ){
    viewedDevice = 'mobile';

  }else if( window.innerWidth >= breakPoint && viewedDevice === 'mobile' ){
    viewedDevice = 'desktop';

  }
});