刷新页面触发事件有哪些 及如何监听DOM元素加载与变化

在网页开发中，了解刷新页面触发的事件以及如何监听DOM元素的加载与变化是至关重要的。这不仅有助于提升用户体验，还能确保页面功能的正常运行。

刷新页面触发的事件

1. beforeunload 事件：在页面即将卸载（包括刷新）之前触发。这个事件可以用于询问用户是否确定要离开当前页面，例如当用户在表单中输入了未保存的数据时，通过此事件弹出确认提示框，防止数据丢失。示例代码如下：

window.addEventListener('beforeunload', function (event) {
    event.preventDefault();
    event.returnValue = '您有未保存的数据，确定要离开吗？';
    return '您有未保存的数据，确定要离开吗？';
});

2. unload 事件：在页面完全卸载时触发。通常用于执行一些清理操作，比如清除定时器、解绑事件监听器等，以避免内存泄漏。代码示例：

window.addEventListener('unload', function () {
    // 清除定时器
    clearInterval(timer);
    // 解绑事件监听器
    document.removeEventListener('click', clickHandler);
});

监听DOM元素加载与变化

1. DOMContentLoaded 事件：当页面的DOM结构加载完成后触发，不等待图片等资源加载。常用于在页面DOM可用时立即执行的初始化操作。例如：

document.addEventListener('DOMContentLoaded', function () {
    // 在这里进行初始化操作，如获取元素、绑定事件等
    const myElement = document.getElementById('myElement');
    myElement.addEventListener('click', function () {
        console.log('元素被点击了');
    });
});

2. MutationObserver API：用于监听DOM树的变化，包括节点的添加、删除、属性修改等。可以创建一个MutationObserver实例，配置观察选项，并指定回调函数。示例：

const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };

const callback = function (mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childNodes') {
            console.log('子节点发生了变化');
        }
        else if (mutation.type === 'attributes') {
            console.log('属性发生了变化');
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

掌握这些刷新页面触发的事件以及DOM元素加载与变化的监听方法，能够让开发者更灵活地控制网页的行为，为用户提供更加流畅和可靠的体验。