Javascript эквивалентен $ .on

Обработчики привязки в native API выполняются с использованием addEventListener().

Чтобы эмулировать делегирование событий jQuery, вы могли бы довольно легко создать систему, которая использует этот .matches()метод для проверки выбранного вами селектора.

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

Возможно, есть некоторые настройки, но в основном это функция, которая связывает элемент, например document, тип события, селектор и обработчик.

Он начинается с e.targetи пересекает родителей, пока не попадет в связанный элемент. Каждый раз он проверяет, соответствует ли текущий элемент селектору, и если да, то он вызывает обработчик.

Поэтому вы бы назвали это так:

delegate(document, "click", ".some_elem", function(event) {
    this.style.border = "2px dashed orange";
});

Вот живая демонстрация, которая также добавляет динамические элементы, чтобы показать, что новые элементы также подняты.

function delegate(el, evt, sel, handler) {
    el.addEventListener(evt, function(event) {
        var t = event.target;
        while (t && t !== this) {
            if (t.matches(sel)) {
                handler.call(t, event);
            }
            t = t.parentNode;
        }
    });
}

delegate(document, "click", ".some_elem", function(event) {
    this.parentNode.appendChild(this.cloneNode(true));
    this.style.border = "2px dashed orange";
});

<div>
  <p class="some_elem">
    <span>
      CLICK ME
    </span>
  </p>
</div>

Вот прокладка, чтобы добавить немного больше поддержки .matches().

if (!Element.prototype.matches) {
  Element.prototype.matches = 
    Element.prototype.matchesSelector || 
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector || 
    function(s) {
        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i = matches.length;
        while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1;            
    };
}

Вот эквивалент javascript дляon()

JQuery

$(document).on('click', '#my-id', callback);

function callback(){
   ...handler code here
}

Javascript

document.addEventListener('click', function(event) {
    if (event.target.id == 'my-id') {
      callback();
    }
});
function callback(){
   ...handler code here
}

При таком подходе идея состоит в том, чтобы использовать event.target . Конечно, по мере того, как селектор меняется, вашему коду придется больше участвовать