外部ライブラリを使用せずに JavaScript でブラウザ ウィンドウのサイズ変更イベントをリッスンするにはどうすればよいですか?

JavaScript でブラウザ ウィンドウのサイズ変更イベントをリッスンする

ウィンドウ サイズの変更への応答は、多くの場合、Web 開発において重要な役割を果たし、Web ページを有効にします。動的に調整します。この質問では、外部ライブラリに依存せずにブラウザ ウィンドウのサイズ変更イベントにリスナーを接続するためのさまざまな手法を検討します。

推奨アプローチ: イベント リスナーの拡張

柔軟性を最大限に高めるには、ネイティブ サイズ変更イベントのイベント リスナーを使用することをお勧めします。 addEventListener を使用すると、パッシブな動作を選択し、useCapture パラメーターを指定してイベント フローを変更できます。次の例は、このアプローチを示しています。

window.addEventListener('resize', function(event) {
    // Your code here
}, true);

代替: 単一イベント ハンドラー

または、ウィンドウ オブジェクトの onresize プロパティにハンドラーを直接割り当てることもできます。ただし、このメソッドでは単一のハンドラーのみが許可され、addEventListener と同じレベルの制御は提供されません。

window.onresize = function(event) {
    // Your code here
};

jQuery に関する考慮事項

必要ありませんがこの特定の使用例では、jQuery はサイズ変更イベントを処理するための追加機能を提供します。異なるブラウザ間で一貫した動作を保証するために、ブラウザ間の互換性の強化が導入される場合があります。ただし、Firefox、Safari、Internet Explorer などのさまざまなブラウザでこれをテストすることをお勧めします。

以上が外部ライブラリを使用せずに JavaScript でブラウザ ウィンドウのサイズ変更イベントをリッスンするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。