在事件函数中返回会导致警报弹出

Question

I am following a book on JavaScript. The page that puzzles me is the following: http://javascriptbook.com/code/c06/html5-events.html .

When the user pressed "Next" button an event fires. This is the code that specifies event listener:

window.addEventListener('beforeunload', function(event) {
  var message = 'You have changes that have not been saved';
  (event || window.event).returnValue = message;
  return message;
})

This code results in an alert and offers me to Stay on this page or Leave . I don't get the syntax here. I thought that alerts are made with alert() function. What is going or here? Thanks for your help

Answer 1

This code returns a message, so browser takes care of confirming the user for navigation( or close) event, also that is why you get browser specific alert.

window.addEventListener('beforeunload', function(event) {
  var message = 'You have changes that have not been saved';
  (event || window.event).returnValue = message;
  return message; // alerts with this message.
});

If you try below code, which doesnt returns the message, then you won't get confirmation alert box, but you can still capture the event And do stuff.

window.addEventListener('beforeunload', function(event) {
  //var message = 'You have changes that have not been saved';
  //(event || window.event).returnValue = message;
  localStorage.eventCaptured = 'eventCaptured without alert'; // gets saved to localStorage
  //return message;
})