回答

两种方式：

一、resize事件

要监听 DOM 对象的 resize 事件，你可以使用 JavaScript 来添加事件监听器。以下是如何监听 DOM 对象的 resize 事件的示例代码：

const targetElement = document.getElementById('your-element-id'); // 替换为你要监听的 DOM 对象

function handleResize() {
// 在这里处理 resize 事件
console.log('DOM 对象被调整大小了！');
}

// 添加 resize 事件监听器
targetElement.addEventListener('resize', handleResize);

请注意以下几点：将 'your-element-id' 替换为你想要监听 resize 事件的 DOM 对象的 ID 或引用。handleResize 函数是事件处理程序，它会在 DOM 对象的大小调整时被调用。你可以在该函数中编写需要执行的代码。使用 addEventListener 方法来添加事件监听器。第一个参数是事件名称，第二个参数是事件处理函数。注意，DOM 对象本身并不会直接触发 resize 事件。通常情况下，resize 事件是添加在 window 对象上，用于监听整个浏览器窗口的大小调整。如果你想监听浏览器窗口大小的调整，可以像这样：

window.addEventListener('resize', handleResize);

二、使用观察者（Observer）

如果要监听其他 DOM 元素的大小调整，你需要确保该元素有一个可调整大小的样式属性（如 width 或 height）或者设置了 resize 属性为 both。然后你可以使用上面提到的代码来添加事件监听器。

要使用观察者（Observer）来监听 DOM 元素的大小调整，你可以使用 ResizeObserver 接口。ResizeObserver 是一个内置的 JavaScript API，用于观察 DOM 元素的大小变化并触发回调函数。以下是如何使用 ResizeObserver 监听 DOM 元素的大小调整：

const targetElement = document.getElementById('your-element-id'); // 替换为你要监听的 DOM 对象

function handleResize(entries) {
// 在这里处理 resize 事件
for (const entry of entries) {
const { width, height } = entry.contentRect;
console.log(`DOM 对象大小调整为：宽度 ${width}px，高度 ${height}px`);
}
}

// 创建 ResizeObserver 实例，并指定回调函数
const resizeObserver = new ResizeObserver(handleResize);

// 开始观察目标 DOM 元素的大小变化
resizeObserver.observe(targetElement);

注意以下几点：将 'your-element-id' 替换为你要监听的 DOM 对象的 ID 或引用。handleResize 函数是 ResizeObserver 的回调函数，它会在目标 DOM 元素的大小发生变化时被调用。回调函数会接收一个参数 entries，其中包含有关 DOM 元素大小变化的信息。使用 new ResizeObserver(handleResize) 创建一个 ResizeObserver 实例，并指定回调函数。使用 resizeObserver.observe(targetElement) 开始观察目标 DOM 元素的大小变化。ResizeObserver 提供了一种高效的方式来监听 DOM 元素的大小调整，而且可以同时观察多个元素。但请注意，ResizeObserver 并不适用于所有浏览器，因此在使用之前，请检查浏览器兼容性。