ロードとサイズ変更プレーンJavaScriptを組み合わせる

Question

私はloadとresize関数を1つに結合します。

$(window).on("resize", function() { 
    if (window.innerWidth < 700) { 
     alert('hello'); 
    } 
}).resize(); 

しかし、私は単純なJavaScript（jQueryなし）でコードを探しています。

これはどのように作成できますか？

Answer 1

あなたは、イベントリスナーを追加し、サイズ変更に関数を呼び出すことによってこれを行うことができます。

window.addEventListener("resize", onResizeFunction); 

function onResizeFunction(){ 
//do whatever you want to do on resize event 
} 

同じことがonLoadイベントのためにある：

window.addEventListener("load", onLoadFunction); 

function onLoadFunction(){ 
//do the magic you want 
} 

あなたはリサイズに機能をトリガしたい場合は、ときウィンドウがロードされます

window.addEventListener("load", onLoadFunction); 

function onLoadFunction(){ 
//do the magic you want 
onResizeFunction();// if you want to trigger resize function immediately, call it 

window.addEventListener("resize", onResizeFunction); 
} 

function onResizeFunction(){ 
//do whatever you want to do on resize event 
}