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

Суть вопроса собственно в теме, но на всякий случай уточню.
Есть динамически подгружающийся контент, как повесить на объект событие, с учетом того что контент может опять измениться. На Jquery это делается $("body").on("click", selector, function(){}); Следующим способом, а как это делается на чистом JS?
  • Вопрос задан
  • 116931 просмотр
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
<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
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы