页面刷新后事件重绑定：利用MutationObserver API
许多开发者都遇到过页面刷新后JavaScript事件失效的问题。除了使用setInterval和clearInterval定时器外，MutationObserver API提供了一种更优雅的解决方案。
MutationObserver是一个异步API，可以监听DOM树的变更，并在变更发生时执行回调函数。以下是如何利用MutationObserver在页面刷新后重新绑定事件：
-
获取目标节点: 通过
document.getElementById或其他选择器方法获取需要监听的DOM节点。 -
配置观察器: 设置观察器配置对象，
{ childList: true, subtree: true }表示监听目标节点及其所有子节点的变更。 -
创建回调函数: 定义一个函数，在DOM发生变更时执行。该函数接收两个参数：
mutationsList(变更列表) 和observer(观察器实例)。 -
创建观察器实例: 创建一个
MutationObserver实例，并将回调函数作为参数传入。 -
开始观察: 调用
observe方法，开始监听目标节点的变更。 -
在回调函数中重新绑定事件: 在回调函数中，检查
mutationsList中的变更，并根据需要重新绑定事件或执行其他操作。
示例代码:
const targetNode = document.getElementById('YOUR_TARGET_NODE_ID'); // 替换为你的目标节点ID
const config = { childList: true, subtree: true };
const callback = function(mutationsList, observer) {
// 检查mutationsList中的变更，例如新增或删除节点
// 重新绑定事件
// ...你的代码...
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
// 停止观察 (可选)
// observer.disconnect();
记住将'YOUR_TARGET_NODE_ID'替换为你的目标节点的实际ID。 通过这种方法，即使页面刷新，MutationObserver也会持续监听DOM变化，并在必要时重新绑定事件，确保你的JavaScript代码正常运行。
