Live Event for Javascript (Vanilla JS, native JS)

live-event.js

/*
 * Get nearest parent element matching selector.
 */
const closest = (function() {
  const el = HTMLElement.prototype,
    matches =
      el.matches ||
      el.webkitMatchesSelector ||
      el.mozMatchesSelector ||
      el.msMatchesSelector;

  return function closest(el, selector) {
    return matches.call(el, selector)
      ? el
      : el.parentElement
      ? closest(el.parentElement, selector)
      : null;
  };
})();

/*
 * Handle events whose target matches a selector.
 * Works even on elements created after the event listener was added.
 *
 * live(
 *   'li .time',
 *   'click',
 *   function(removeBtn) {
 *     console.log(this, " was clicked!");
 *   },
 *   document.getElementById("element_id")  // context is optional
 * );
 */
const live = function(selector, eventType, callback, context) {
  (context || document).addEventListener(eventType, function(event) {
    const listener = closest(event.target, selector);

    if (listener) {
      callback.call(listener, event);
    }
  });
};

/* Example HTML:
 *
 * <ul id="element_id">
 *     <li class="list-item">
 *         <div class="time">Element for live event</div>
 *         <div class="title">
 *             No event - nothing happens
 *         </div>
 *         <div class="expand">
 *             No event - nothing happens
 *         </div>
 *     </li>
 * </ul>
 */