JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output">placeholder</div>
<button id="addEvtPopup">Add Event to Pop-up Window</button>
<button id="removeEvtPopup">Remove Event from Pop-up Window</button>
<button id="popupBtn">Open Pop-up Window</button>

JavaScript

var output = document.getElementById("output");
var addEvtPopupBtn = document.getElementById("addEvtPopup");
var removeEvtPopupBtn = document.getElementById("removeEvtPopup");
var popupBtn = document.getElementById("popupBtn");
var popupWin = null;

function myHandler(evt) {
  output.innerHTML = output.myParam;
}

popupBtn.onclick = function() {
  // Observe the variable referencing the pop-up Window
  popupWin = window.open("", "myPopupWin", "width=100px, height=100px, top=500px, left=-1000px");
};

addEvtPopupBtn.onclick = function() { 
  popupWin.addEventListener("unload", myHandler, false);
  output.innerHTML = "Pop-up Event added";
  output.myParam = "Pop-up Event unloaded";
  popupBtn.eventEnabled = true;
};

removeEvtPopupBtn.onclick = function() {
  // Chrome and Firefox: With pop-up closed, popupWin still has reference to closed pop-up window
  // IE11 and Edge: With pop-up closed, popupWin has no reference to closed pop-up window
  // As a result, line 28 will error out in the latter browsers but not in the former browsers
  // In both cases, typeof popupWin evaluates to "object"
  popupWin.removeEventListener("unload", myHandler, false);
  output.innerHTML = "Pop-up Event removed";
  popupBtn.eventEnabled = false;
};