在页面离开前提醒你的 beforeunload 事件

beforeunload 事件在当页面卸载(关闭)或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

以下操作会触发 beforeunload 事件:

·关闭浏览器窗口
  ·通过地址栏或收藏夹前往其他页面的时候
  ·点击返回,前进,刷新,主页其中一个的时候
  ·点击 一个前往其他页面的url连接的时候
  ·调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind , location replace , location reload , form submit.
  ·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
  ·重新赋予location.href的值的时候。
  ·通过input type=”submit”按钮提交一个具有指定action的表单的时候。

例如:

window.addEventListener('beforeunload', function(event) {
      document.getElementById('keyword').value = '';
});

在这个例子中,我们为 window 对象添加了一个 beforeunload 事件监听器。当用户尝试离开页面时,会触发这个事件,并可以通过设置 event.returnValue 来显示一个确认对话框,让用户选择是否真的要离开页面。document.getElementById 用于获取页面上具有指定 id 的元素。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 7,325评论 0 4
  • 事件处理客户端js程序采用异步事件驱动编程模型。在这种情况下当文档,浏览器,元素发生一些事情的时候,会产生事件。 ...
    小小小8021阅读 3,233评论 0 0
  • 以下内容是在谷歌浏览器测试,总结的。 页面加载 事件顺序: readystatechange --- DOMCon...
    别熬夜了_ec3d阅读 3,973评论 0 0
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,867评论 1 11
  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 5,565评论 0 0