Event Delegation with Plain Vanilla JavaScript

eventdelegation.js

/* Imagine we have a <div id="myDiv"></div> element. Suppose a new element <div class='new-element'></div> is appended 
to the parent. Write a JS function that can do event delegation to an element that will be added in future. */

var parentRef = document.getElementById('myDiv'); //document.querySelector('#myDiv')
function delegate(type, elRef, callback) {
  parentRef.addEventListener(type, function(evt) {
    document.querySelectorAll(elRef).forEach(function(el) {
      if(el === evt.target) {
        callback.call(null, evt);
      }
    })
  }, false);
}

delegate('click', '.new-element', function(evt) {
  console.log('child element clicked', evt);
});