Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Diferença entre pegar o target do evento e o próprio elemento

Boa noite,

Fiquei com uma dúvida referente a diferença entre usar o dataset no próprio elemento do array (código 1) e usar o dataset no objeto do evento passado na function(código 2): ** Código 1:**

const control_buttons = document.querySelectorAll('[data-controle]');
console.log(control_buttons);

control_buttons.forEach(button => {
    button.addEventListener('click', () => {
        const operacao = button.dataset.controle;
        manipularDados(operacao, button.parentNode);
    });
});

Código 2:

const control_buttons = document.querySelectorAll('[data-controle]');
console.log(control_buttons);

control_buttons.forEach(button => {
    button.addEventListener('click', (evento) => {
        const operacao = evento.target.dataset.controle;
        manipularDados(operacao,evento.target.parentNode);
    });
});

Existe alguma diferença? Pelo que entendi, o evento seria uma cópia por referência do button, então não teria diferença entre os 2 códigos.

1 resposta
solução!

Encontrei a resposta pra minha dúvida no: https://developer.mozilla.org/en-US/docs/Web/API/Event/target

Acredito que pro caso que coloquei acima, ambos servem. Porém, para tipos como ul ou table em que tenho vários elementos, seria mais fácil colocar um único listener no elemento pai e pelo event.target pegar o filho que disparou o evento. Exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Teste 1</li>
        <li>Teste 2</li>
        <li>Teste 3</li>
    </ul> 
    <script src="teste.js"></script>   
</body>
</html>

js: const lista = document.querySelector('ul');

lista.addEventListener('click', (evt)=> { console.log(evt.target); });

Nesse exemplo acima, se clico em qualquer li, ele me retorna o exato li que gerou o evento, mesmo tendo colocado o listener apenas no ul