Являются ли эти варианты идентичны по своей работе?

Question

[Вячеслав Лебедев]

Добрый день! :)
Два варианта кода на js:
С использованием jQ, точно уверен, что событие будет отрабатывать и на появившиеся элементы (динамически), после инициализации dom html:

$(document).on('click', '.add', function() {
  this.addClass('active');
});

Натив.

document.querySelector('.add').addEventListener('click', function() {
  this.classList.add('active');
});

upd: и как переписать нативный js , что бы он был идентичен jQ коду?

Answer 1

[Сергей Протько]

нет. Гуглить "делегирование событий", "всплытие событий".

Вот идентичный (ну или почти):

document.addEventListener('click', function (e) {
    if (!e.target.matchesSelector('.add')) return;

    e.target.classList.add('active');
})

Comments

[Вячеслав Лебедев]

Спасибо! :) Почему почти идентичный? Отрабатывать то будет одинакого или нет?

[Сергей Протько]

Вячеслав Лебедев: ну я не на 100% уверен что там внутри jQuery. Может оно еще и srcElement учитывает для старых IE и т.д.

[Евгений Петров]

Сергей Протько: Отличие, прежде всего, в том, что все обработчики в jQuery сохраняются и можно отменить любую функцию. В твоём примере отменить этот обработчик нельзя. А в jquery есть off(), который снимет все сохранённые обработчики, даже если была передана анонимная функция.

Ну и целевой элемент события не учитывает вложенности. Например, параграф может быть вложен в интересующий нас блок, но для того, чтобы понять это, требуется проверить цепочку родительских узлов.

[Сергей Протько]

Евгений Петров: а removeEventListener на что?

По поводу вложенности - да, есть такое.

[Евгений Петров]

Сергей Протько: А removeEventListener не может снять анонимную функцию, назначенную обработчиком.

[Сергей Протько]

Евгений Петров: может, если мы сохранили на нее ссылку)

[Евгений Петров]

Сергей Протько: Именно так jQuery и делает. Ну, и если функцию сохранить, то она уже не будет анонимной:)
Я просто написал про отличия нативного способа и обёртки jQuery. А про делегирование — сущая правда. Нужно, по возможности, использовать именно его.