1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptでウィンドウのリサイズイベントをトリガーする方法は?

2022-03-24 08:07:55

質問

ウィンドウサイズ変更時のトリガーを登録しています。イベントを呼び出すトリガーの方法を知りたいです。例えば、divを非表示にしたときに、トリガー関数が呼ばれるようにしたい。

私が見つけたのは window.resizeTo() は、関数をトリガーすることができますが、他の解決策はありますか?

どのように解決するのですか?

可能な限り、イベントをディスパッチするのではなく、関数を呼び出すのが好ましいと思います。これは、実行したいコードをコントロールできる場合に有効ですが、コードを所有していない場合については、以下を参照してください。

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

この例では doALoadOfStuff 関数は、イベントをディスパッチすることなく

モダンブラウザでは イベントを発生させる を使っています。

window.dispatchEvent(new Event('resize'));

Internet Explorerではうまくいかないので、長文で書く必要があります。

var resizeEvent = window.document.createEvent('UIEvents'); 
resizeEvent.initUIEvent('resize', true, false, window, 0); 
window.dispatchEvent(resizeEvent);

jQueryは trigger メソッド のように動作します。

$(window).trigger('resize');

と注意書きがある。

しかし .trigger() は、合成されたイベントオブジェクトでイベントの活性化をシミュレートしていますが、自然に発生するイベントを完全に再現しているわけではありません。

特定の要素でイベントをシミュレートすることも可能ですが...。

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id); 

  return elem.dispatchEvent(event);
}