Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Vanilla JS equivalent of jQuery's .live(): use event delegation to handle events whose target matches a selector, closest(): get nearest parent element matching selector
// get nearest parent element matching selector
var closest = (function() {
var el = HTMLElement.prototype;
var matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
return function closest(el, selector) {
return, selector) ? el : closest(el.parentElement, selector);
// handle events whose target matches a selector
// works even on elements created after the event listener was added:
// delegateEvent('.todo .remove', 'click', function(removeBtn) {
// removeTodo(removeBtn.parentNode);
// }, '.todos'); /* elementScope is optional */
function delegateEvent(selector, eventType, handler, elementScope) {
(elementScope || document).addEventListener(eventType, function(event) {
var listeningTarget = closest(, selector);
if (listeningTarget) {, event);

This comment has been minimized.

Copy link

allenhwkim commented May 14, 2017

Found this

function delegate(element, event, descendentSelector, callback){
  element.addEventListener(event, function(e){
    var elem =; 
    // returns null if no matching parentNode is found
      callback(elem, e); 
  }, false);

However, closet is not supported by IE.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.