Событие.on jquery в нативном javascript?

Question

[Хазрат Гаджикеримов]

Постепенно отказываюсь от использования jQuery, и теперь столкнулся с тем, что в jquery можно поставить обработчик на опр. класс с помощью события .on(), и он сработает даже на загруженных с помощью ajax элементах.
Вот у меня вопрос, как в javascript поставить обработчик так, что бы он работал и на добавленных | загруженных ajax'ом html данных. можно ли это сделать с помощью querySelector?

Answer 1

[Vasily Novosad]

document.addEventListener('click', function (event) {
    var selectors = document.querySelectorAll('____СЕЛЕКТОР____'),
        element = event.target,
        index = -1;

    if (selectors) {

        while (element && ((index = Array.prototype.indexOf.call(selectors, element)) === -1)) {
            element = element.parentElement;
        }

        if (index > -1) {
            (function () {
                //РЕЗУЛЬТАТ СЮДА
            }).call(element, event);
        }
    }
});

Answer 2

[Вячеслав]

Возможно, я отстал от жизни, но jQuery.on никогда не работал по умолчанию на элементах, загруженных после навешивания события (подгружаемых через ajax, например).
Чтобы работало, нужно было сделать что-то вроде
$(document).on('click', element, callback) - т.е. навесить событие на родительский элемент.
Думаю, точно так же можно сделать и в ванильном js - навесить событие на родительский элемент, в обработчике фильтровать по элементу, на котором фактически сработало событие:
вот примерное решение, но я обычно использую для такого jQuery - возможно, это можно было бы записать лучше/проще jsfiddle.net/027qg2a3/1

Comments

[Хазрат Гаджикеримов]

Все верно, нужно было мне в пример кода выставить следующее $('body').on('click', '.class', handle);

Answer 3

[Дмитрий Шишкин]

.on() это аналог .addEventListener в JavaScript.
Используйте его

Comments

[Хазрат Гаджикеримов]

Возможно так, но обработчик установленный с помощью . addEventListener не работает на добавленых DOM элементах

[Vasily Novosad]

Хазрат Гаджикеримов: Посмотрите мой пример ниже. addEventListener сработает, если ставить его на родительский элемент, а при наступлении события, проверять искомый элемент по target

Answer 4

[Dmitry Demin]

Слышали про .delegate()?
codepen.io/anon/pen/PwmqMm

Comments

[Хазрат Гаджикеримов]

delegate это метод jquery, ты читай текст, я отказываюсь от jquery! как на javascript установить обработчик, такой что бы при добавление нового элемента, работал обработчик!

[Dmitry Demin]

Хазрат Гаджикеримов: это и есть проблема? о боже.
1. Вешаем обработчик на нужное событие на document.
2. В обработчике проверяем, нужно ли для этого элемента обрабатывать событие.
3. Если да - обрабатываем событие!
Готово! Вы восхитительны!

Answer 5

[bio]

Подобной нативной функцией нет.
Тут писать самостоятельно или выдрать откуда-нибудь, например из того же jquery.