* Isso foi editado para permitir que filhos da classe de destino acionem os eventos. Veja a parte inferior da resposta para obter detalhes. *
Uma resposta alternativa para adicionar um ouvinte de evento a uma classe em que itens são frequentemente adicionados e removidos. Isso é inspirado na on
função do jQuery, na qual você pode passar um seletor para um elemento filho que o evento está ouvindo.
var base = document.querySelector('#base'); // the container for the variable content
var selector = '.card'; // any css selector for children
base.addEventListener('click', function(event) {
// find the closest parent of the event target that
// matches the selector
var closest = event.target.closest(selector);
if (closest && base.contains(closest)) {
// handle class event
}
});
Fiddle: https://jsfiddle.net/u6oje7af/94/
Isso escutará cliques nos filhos do base
elemento e, se o destino de um clique tiver um pai correspondente ao seletor, o evento da classe será tratado. Você pode adicionar e remover elementos como desejar, sem precisar adicionar mais ouvintes de clique aos elementos individuais. Isso irá capturá-los todos, mesmo para os elementos adicionados após a adição deste ouvinte, assim como a funcionalidade do jQuery (que eu imagino ser um pouco semelhante ao fundo).
Isso depende da propagação dos eventos; portanto, se você estiver stopPropagation
no evento em outro lugar, isso pode não funcionar. Além disso, a closest
função tem alguns problemas de compatibilidade com o IE aparentemente (o que não acontece?).
Isso pode ser transformado em uma função se você precisar executar esse tipo de ação ouvindo repetidamente, como
function addChildEventListener(base, eventName, selector, handler) {
base.addEventListener(eventName, function(event) {
var closest = event.target.closest(selector);
if (closest && base.contains(closest)) {
// passes the event to the handler and sets `this`
// in the handler as the closest parent matching the
// selector from the target element of the event
handler.call(closest, event);
}
});
}
=========================================
EDIT: Esta postagem originalmente usou a matches
função para Elementos DOM no destino do evento, mas isso restringiu os destinos dos eventos apenas à classe direta. Foi atualizada para usar a closest
função, permitindo que eventos em filhos da classe desejada também acionem os eventos. O matches
código original pode ser encontrado no violino original:
https://jsfiddle.net/u6oje7af/23/