原生Js监听普通dom尺寸变化

可以使用`ResizeObserver` API 监听普通 DOM 元素尺寸的变化，这个 API 是浏览器原生支持的。使用方法如下：

创建 `ResizeObserver` 实例：

const observer = new ResizeObserver(entries => {
  // 处理尺寸变化的回调函数
  console.log('DOM 元素尺寸发生变化')
})

将需要监听尺寸变化的 DOM 元素传入 `observe` 方法：

const target = document.querySelector('#target')
observer.observe(target)

当被观察的 DOM 元素的尺寸发生变化时，`ResizeObserver` 的回调函数会被触发。在回调函数中可以获取到当前元素的宽度和高度等信息。

需要注意的是，`ResizeObserver` API 是比较新的 API，不是所有的浏览器都支持，如果需要兼容性可以使用第三方库，比如 `ResizeSensor` 等。

相关问题

原生js 每分钟监听某个元素的数据变化,并把变化值记录下来

实现这个功能可以使用 MutationObserver API，该 API 可以监听指定的 DOM 节点，一旦节点的子节点或属性发生变化，就会触发回调函数。你可以在回调函数中获取到变化后的节点信息并记录下来。

以下是一个示例代码，它每分钟监听 id 为 “target” 的元素的文本内容变化，并把变化的值记录到数组中：

// 获取目标元素
const target = document.getElementById('target');

// 创建 MutationObserver 实例
const observer = new MutationObserver((mutationsList, observer) => {
  // 遍历所有变化
  for (let mutation of mutationsList) {
    // 如果是子节点的文本内容变化
    if (mutation.type === 'childList' && mutation.target === target && mutation.addedNodes.length > 0) {
      // 记录变化的值
      const value = target.textContent;
      console.log('Value changed:', value);

      // 将值记录到数组中
      values.push(value);
    }
  }
});

// 启动监听
observer.observe(target, { childList: true });

// 每分钟输出一次记录的变化值
setInterval(() => {
  console.log('Recorded values:', values);
}, 60000);

在上面的代码中，我们先获取了 id 为 “target” 的元素，然后创建了一个 MutationObserver 实例。我们通过 `observe` 方法来启动对目标元素的监听，设置 `childList` 为 true，表示要监听子节点的变化。

在回调函数中，我们遍历了所有的变化，如果发现是目标元素的子节点的文本内容发生了变化，就记录下来，并把值存储到数组中。

最后，我们使用 `setInterval` 方法每分钟输出一次记录的变化值。

vue2中获取DOM绑定原生js键盘事件

在Vue2中，你可以通过使用`ref`来获取DOM元素的引用，并使用原生的JavaScript来绑定键盘事件。以下是一个示例：

<template>
  <div>
    <input type="text" ref="inputRef" />
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.inputRef.addEventListener('keyup', this.handleKeyUp);
  },
  beforeDestroy() {
    this.$refs.inputRef.removeEventListener('keyup', this.handleKeyUp);
  },
  methods: {
    handleKeyUp(event) {
      if (event.key === 'Enter') {
        // 处理回车事件的逻辑
        console.log('回车键被按下了！');
      }
    }
  }
}
</script>

在上面的示例中，我们给输入框添加了一个`ref`属性，将其命名为`inputRef`。在`mounted`生命周期钩子函数中，我们通过`this.$refs.inputRef`获取到输入框的DOM引用，并使用`addEventListener`方法来绑定`keyup`事件和对应的处理函数`handleKeyUp`。

在`handleKeyUp`方法中，我们检查按下的键是否是回车键（通过`event.key`属性），如果是，则执行相应的逻辑。在组件销毁之前，我们使用`removeEventListener`方法来移除键盘事件的监听。

这样，你就可以使用原生的JavaScript来绑定和处理键盘事件了。记得在适当的时候移除事件监听，以避免内存泄漏。