window.onresize和resize

`window.onresize` 和 `resize` 事件都是在窗口大小改变时触发的事件，但是它们有一些区别。

`window.onresize` 是 `window` 对象的一个属性，它表示在窗口大小改变时需要执行的处理函数。可以使用 `window.onresize` 属性来添加或删除事件处理函数，例如：

window.onresize = function() {
  // 窗口大小改变时执行的代码
}

`resize` 事件是 `Window` 对象的一个事件，它表示窗口大小改变时触发的事件。可以使用 `window.addEventListener` 方法来添加或删除 `resize` 事件的处理函数，例如：

window.addEventListener('resize', function() {
  // 窗口大小改变时执行的代码
})

相比之下，使用 `addEventListener` 方法添加事件处理函数可以多次添加不同的处理函数，而使用 `onresize` 属性只能设置一个处理函数，并且最后设置的函数会覆盖之前设置的函数。

相关问题

window.addEventListener('resize')和window.onresize

window.addEventListener('resize')和window.onresize都是用来监听窗口大小变化的事件，但是它们有一些区别。

window.addEventListener('resize')可以添加多个事件监听器，而window.onresize只能添加一个事件监听器。

window.addEventListener('resize')可以通过removeEventListener()方法来移除事件监听器，而window.onresize无法移除事件监听器。

window.addEventListener('resize')可以在任何时候添加事件监听器，而window.onresize只能在页面加载完成后添加事件监听器。

window.onresize = mapChart.resize失效

可能是因为 `mapChart` 对象未正确初始化或被销毁。请确保 `mapChart` 对象在执行 `window.onresize` 事件时已经被正确初始化，并且未被销毁。另外，建议使用 `debounce` 或 `throttle` 函数来限制 `resize` 事件的触发频率，以优化性能。以下是一个使用 `lodash` 库中的 `debounce` 函数的示例代码：

import { debounce } from 'lodash';

window.onresize = debounce(() => {
  if (mapChart) {
    mapChart.resize();
  }
}, 300);

这里的 `debounce` 函数会在事件触发后延迟 300 毫秒再执行回调函数，以避免事件频繁触发导致不必要的性能消耗。