[解決済み】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);
}
関連
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み】中央値の計算 - javascript
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み] JavaScript のウィンドウサイズ変更イベント
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】TypeError: $(...).DataTable は関数ではありません。
-
[解決済み】Uncaught ReferenceError: angular is not defined - AngularJSが動作しない。
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】ある要素が可視DOMに存在するかどうかを確認するにはどうすればいいですか?
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]
-
[解決済み】クロスブラウザのウィンドウサイズ変更イベント - JavaScript / jQuery