onbeforeunload事件两种写法及效果

Posted 2020-10-02

在符合W3C标准的浏览器里，可以使用addEventListener方法来添加事件。

当不需要为一个事件添加多个处理函数的时候，可以简单的使用onXXX=function(){}的方式来添加事件处理函数，但是当需要为同一事件添加多次处理函数（handler）时，就要用到addEventListener

一般也碰不到什么问题，然而今天在使用onbeforeunload的时候发现，两种方式有一点点区别，区别在于返回值的处理。

直接用

window.onbeforeunload=function(){return ‘确定要离开吗？‘}

这种方式，没有问题。刷新或者跳转都能给出正确提示，但是使用addEventListerner时，就没有用了，如下：

function a(){
return ‘要离开吗?‘;
}
window.addEventListener(‘beforeunload‘,a,true)

并没有任何效果，页面还是照样刷新或者离开了。在Google上查了一下，结果得到是这样的，应该使用event.returnValue来指明要提示的内容，代码修改完后如下：

function beforeUnloadHandler(event){
event.returnValue = "要离开吗？"
}
window.addEventListener(‘beforeunload‘,beforeUnloadHandler,true);

这样就可以了，并且根据标准，第一种方式，也应该使用event.returnValue的方式来给出提示。

可以参考这个文章：https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload