addMessage.js

<main>
  <p id="result"></p>
</main>
<script>
var testRoot = document.querySelector('main');
var result = document.querySelector('#result');

function addMessage(text) {
  var el = document.createElement('p');
  el.textContent = text;

  result.appendChild(el);
}

var listener = new GlobalEventListener(testRoot);
listener.listen('click', 'button#buttonA', function(ev) {
  addMessage('First button was clicked!');
});

listener.listen('mouseover', '.buttonB', function(ev) {
  addMessage('Second button was moused over');
});

var buttonA = document.createElement('button');
buttonA.id = 'buttonA';
buttonA.textContent = 'This button was inserted into ' +
  'the DOM *after* an event listener for it was added';


var buttonB = document.createElement('button');
buttonB.classList.add('buttonB');
buttonB.textContent = 'This button was inserted into the DOM, ' +
  'then removed, then inserted again';

testRoot.appendChild(buttonA);
testRoot.appendChild(buttonB);
buttonB.remove();
testRoot.appendChild(buttonB);
</script>