JS中的resize事件

JS中的resize事件是指当浏览器窗口的大小发生变化时，会触发resize事件，这个事件可以被用来做一些操作，比如重新计算页面元素的位置、大小等。

resize事件的实现很简单，只要在需要监听resize事件的元素上绑定一个resize事件处理函数，就可以实现resize事件的功能。例如，下面的代码可以实现窗口大小变化时，弹出一个提示框：

window.onresize = function(){
  alert("窗口大小发生变化！");
}

resize事件也可以用于实现一些动态效果，比如当窗口大小变化时，自动调整页面元素的位置、大小等。例如，下面的代码可以实现窗口大小变化时，自动调整页面元素的位置：

window.onresize = function(){
  var element = document.getElementById("element");
  element.style.left = (window.innerWidth-element.offsetWidth)/2 + "px";
  element.style.top = (window.innerHeight-element.offsetHeight)/2 + "px";
}

resize事件也可以用于实现一些特殊的效果，比如当窗口大小变化时，自动改变页面元素的大小。例如，下面的代码可以实现窗口大小变化时，自动改变页面元素的大小：

window.onresize = function(){
  var element = document.getElementById("element");
  element.style.width = window.innerWidth + "px";
  element.style.height = window.innerHeight + "px";
}

resize事件可以用来实现很多有趣的效果，只要能想到的，就可以用resize事件来实现。