调整浏览器大小时 addEventListener 'resize' 不触发 window

Question

我需要检测手机视口宽度的变化。我使用以下代码来检测浏览器 window 的调整大小变化，但是当 window 调整大小时 addEventListener 不会触发我的函数：

<html>
<head>
</head>
<body>

<div id="size">-</div><br>
<div id="orientation">-</div>

<script>

window.addEventListener('resize', sizeChanged() );

function sizeChanged() {

    var w=window.outerWidth;
    var h=window.outerHeight;
    var txt='<b>sizeChanged:</b><br> W=' + w + 'px<br> H=' + h+'px';
    document.getElementById('size').innerHTML=txt;
    console.log(txt);
}

window.addEventListener('orientationchange', orientationChanged() );

function orientationChanged() {

  var w=window.outerWidth;
  var h=window.outerHeight;
  var txt='<b>orientationChanged:</b><br> W=' + w + 'px<br> H=' + h+'px';
  document.getElementById('orientation').innerHTML=txt;
  console.log(txt);

}

</script>

</body>
</html>

我用 FF 62.0.3、Chrome 70.0.3538.77 和 IE11 尝试了上面的代码。

有人知道我的代码有什么问题吗？

Answer 1

您突然调用了这些函数，所以基本上，您传递的是这些函数的结果，在这种情况下，undefined。

您需要将函数作为引用（param）传递，例如，

window.addEventListener('resize', sizeChanged); // Look at the missing parentheses.
window.addEventListener('orientationchange', orientationChanged); // Look at the missing parentheses.

调整浏览器大小时 addEventListener 'resize' 不触发 window

addEventListener 'resize' doesnt fire when resizing the browser window

javascript

addeventlistener

window-resize

device-orientation