Аналог $("body").on("click", selector, function(... На чистом JS?

Question

[Дмитрий Приходченко]

Суть вопроса собственно в теме, но на всякий случай уточню.
Есть динамически подгружающийся контент, как повесить на объект событие, с учетом того что контент может опять измениться. На Jquery это делается $("body").on("click", selector, function(){}); Следующим способом, а как это делается на чистом JS?

Answer 1

[Алексей Уколов]

<ul id="list">
    <li class="yes">1</li>
    <li class="no">2</li>
    <li class="no">3</li>
    <li>...</li>
    <li class="yes">100</li>
</ul>

function on(elSelector, eventName, selector, fn) {
    var element = document.querySelector(elSelector);

    element.addEventListener(eventName, function(event) {
        var possibleTargets = element.querySelectorAll(selector);
        var target = event.target;

        for (var i = 0, l = possibleTargets.length; i < l; i++) {
            var el = target;
            var p = possibleTargets[i];

            while(el && el !== element) {
                if (el === p) {
                    return fn.call(p, event);
                }

                el = el.parentNode;
            }
        }
    });
}

on('#list', 'click', '.yes', function(e) {
    // this function is only called, when a list item with 'yes' class is called
    console.log(e.target); // this is the clicked list item
});

bdadam.com/blog/plain-javascript-event-delegation.html