onbeforeunload事件两种写法及效果

在符合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

原文地址:https://www.cnblogs.com/easyc/p/javascript_addeventlistener_beforeunload.html