addEventListener('resize') 的用法

js yekong

addEventListener('resize') 是用于在浏览器窗口大小变化时触发相应的事件处理函数。下面是 addEventListener('resize') 的用法:

// 通过addEventListener绑定resize事件处理函数
window.addEventListener('resize', handleResize);

// 定义resize事件处理函数
function handleResize(event) {
  // 在窗口大小变化时执行的代码
  // 可以在这里处理响应逻辑,如调整布局、重新计算元素位置等
}

使用 addEventListener('resize'),我们可以将一个事件处理函数绑定到 window 对象上的 resize 事件。当浏览器窗口大小发生变化时,触发 resize 事件,然后执行相应的事件处理函数 handleResize

在事件处理函数中,你可以编写适当的代码来响应窗口大小变化。例如,你可以重新计算元素的位置、调整布局、重新渲染页面等操作。事件处理函数中的 event 参数可以提供关于事件的更多信息,例如窗口的新大小等。

注意:为了避免内存泄漏,在不需要监听 resize 事件时,最好使用 removeEventListener 方法将事件处理函数从 window 对象上移除,例如:

window.removeEventListener('resize', handleResize);

这样可以确保在不需要时停止监听窗口大小变化,以提高性能和资源利用效率。

与ResizeObserver的区别

ResizeObserver和addEventListener('resize')的区别

喜欢