是否存在页面重载前触发的JavaScript DOM事件监听器？

嘿，当然有啦！在JavaScript DOM里，确实存在能在页面重载（或者关闭标签页/窗口）之前触发的事件监听器，最常用的就是beforeunload和unload，不过两者的时机和行为略有不同，我给你详细拆解下：

1. beforeunload 事件 #

这绝对是最匹配你需求的选项——它会在页面即将卸载（包括重载、关闭操作）之前触发，此时页面还处于完全可交互的状态，你可以在这里做检查未保存内容、提醒用户这类操作。

用法示例：

window.addEventListener('beforeunload', function(event) {
  // 举个例子：检查是否有未提交的表单内容
  const formHasUnsavedChanges = document.getElementById('myForm').classList.contains('modified');
  
  if (formHasUnsavedChanges) {
    // 必须执行这一步，才能触发浏览器的离开确认弹窗
    event.preventDefault();
    // 注意：现在多数浏览器会忽略自定义文本，显示默认提示
    event.returnValue = '你还有未保存的更改，确定要离开吗？';
    return event.returnValue;
  }
});

小提醒：为了避免网站滥用弹窗骚扰用户，现在主流浏览器都会忽略你自定义的提示文本，统一显示浏览器自带的标准化确认内容。

2. unload 事件 #

这个事件会在页面即将卸载的最后一刻触发，此时页面已经开始销毁流程，很多DOM操作和异步任务（比如Ajax请求）可能会被浏览器直接取消。它更适合做一些轻量的清理工作，比如移除全局事件监听、释放内存资源等。

用法示例：

window.addEventListener('unload', function() {
  // 执行轻量清理：比如移除之前绑定的全局滚动监听
  window.removeEventListener('scroll', scrollHandler);
});

注意：浏览器的性能优化机制会限制unload中的异步操作，像fetch、setTimeout这类任务大概率不会被执行，所以别依赖它做需要保证完成的工作。

关于页面重载的触发顺序 #

当用户触发页面重载时，事件的执行顺序是：

• 先触发beforeunload，如果用户确认离开，才会进入下一步
• 接着触发unload，完成最后清理
• 之后浏览器才会开始重新加载页面

这两个事件都是在重载动作真正开始之前执行的，完全满足你的需求~

内容的提问来源于stack exchange，提问作者reza