// DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may be not yet loaded.
document.addEventListener("DOMContentLoaded", function(e) {
  console.log(e);
  console.log("DOMcontentLoaded");
});

// load – the browser loaded all resources(images, styles etc).
window.addEventListener("load", function(e) {
  console.log(e);
  console.log("load");
});
// alternative
// window.onload = function() {
//   console.log("load");
// };

// event is fired when the window, the document and its resources are about to be unloaded
// There's a lot of inconsistence between browsers and versions, some might not show the message returned or even don't show the dialog box at all
window.addEventListener("beforeunload", function(e) {
  console.log(e);
  var confirmationMessage = "Leave? Are you sure?";
  e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
  return confirmationMessage; // Gecko, WebKit, Chrome <34
});
// alternative
// window.onbeforeunload = function(e) {
//   return "Leave? Are you sure?";
// };

// onunload - when a visitor leaves the page, fired after beforeunload
window.addEventListener("unload", function(e) {
  console.log(e);
  console.log("unload");
});
// alternative
// window.onunload = function() {
//   console.log("unload");
// };