Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Duvida na aula: 04 Evitando o comportamento padrão de um evento

Pessoal, bom dia. Estou com uma dúvida relacionada ao comportamento padrão. Fiz um código um pouco diferente do que o instrutor sugeriu. Como já tinha feito o curso "Manipulando o DOM", dividi o código javascript em 3 partes: main.js, calcularImc.js e adicionarPaciente.js Neste cenário, não estou conseguindo utilizar o preventDefault(), sempre obtendo esse erro: Uncaught ReferenceError: evento is not defined Segue meus códigos main.js

import calcularImc from "./calcularImc.js";
import adicionarPaciente from "./adicionarPaciente.js";
const tituloPagina = document.querySelector(`h2`);
//O jeito recomendado, seria utilizando um data-attribute, mas para seguir o curso, vou usar a classe
//const paciente = document.querySelector(`[data-primeiro-paciente]`); //Criei um data-attribute e usei no query selector
const pacientes = document.querySelectorAll(`.paciente`); //Selecionando todos os itens que tem a classe paciente e retornando um array
pacientes.forEach((index) => { calcularImc(index) }); //iterando pelo array de pacientes para calcular o IMC. A palavra index pode ser substituida sem prejuizo a lógica

//Criando escutador para evento do clique do botão
const botaoAdicionar = document.querySelector(`[data-botao-adicionar]`);
//
botaoAdicionar.addEventListener(`click`, adicionarPaciente(evento));

adicionarPaciente.js

import calcularImc from "./calcularImc.js";
const adicionarPaciente = (evento) => {
    evento.preventDefault();
    //Selecionando elementos do cadastro de novos pacientes
    const elementosAdd = document.querySelectorAll(`.campo`);
    console.log(elementosAdd);
    //Validação dos campos
    if (elementosAdd[0].value == `` || elementosAdd[1].value == `` || elementosAdd[2].value == `` || elementosAdd[3].value == ``) {
        alert(`Algum dado faltando!`)
        return false;
    } else {
        const elTrAdicionar = document.createElement(`tr`);
        elTrAdicionar.classList.add(`paciente`);
        //Utilizando a query string para montar os dados da tabela
        const elTdAdicionar = `<td class="info-nome">${elementosAdd[0].value}</td>
        <td class="info-peso">${elementosAdd[1].value}</td>
        <td class="info-altura">${elementosAdd[2].value}</td>
        <td class="info-gordura">${elementosAdd[3].value}</td>
        <td class="info-imc"></td>`;
        elTrAdicionar.innerHTML = elTdAdicionar;
        calcularImc(elTrAdicionar);
        const tabelaInserir = document.querySelector(`[data-tabela-pacientes]`);
        tabelaInserir.appendChild(elTrAdicionar);
    }
}
export default adicionarPaciente;

Consegui resolver esse erro não passando parâmetros para a função adicionarPaciente e usando a palavra event (que apareceu riscada no visual studio code indicando que é código descontinuado. Fiz outra forma aqui foi criando uma função buttonHandler dentro do main.js, chamando ela no evento de clique e dentro da button handler, tratando o prevent default. Assim:

import calcularImc from "./calcularImc.js";
import adicionarPaciente from "./adicionarPaciente.js";
const tituloPagina = document.querySelector(`h2`);
//O jeito recomendado, seria utilizando um data-attribute, mas para seguir o curso, vou usar a classe
//const paciente = document.querySelector(`[data-primeiro-paciente]`); //Criei um data-attribute e usei no query selector
const pacientes = document.querySelectorAll(`.paciente`); //Selecionando todos os itens que tem a classe paciente e retornando um array
pacientes.forEach((index) => { calcularImc(index) }); //iterando pelo array de pacientes para calcular o IMC. A palavra index pode ser substituida sem prejuizo a lógica
const buttonHandler = (evento) =>{
    evento.preventDefault();
    adicionarPaciente();
}
//Criando escutador para evento do clique do botão
const botaoAdicionar = document.querySelector(`[data-botao-adicionar]`);
//
botaoAdicionar.addEventListener(`click`, buttonHandler);

Fiz o certo? Não consigo passar o evento para a minha função adicionarPaciente e trata-lo lá? O tratamento do evento tem que ser dentro do mesmo arquivo que o está chamando?

2 respostas
solução!

Fala José, tudo bem?

O que acontece é bem simples, no método addEventListener, como segundo parâmetro é esperado ou uma função anônima, ou o NOME de uma função, o problema está que você passa a função sendo invocada, então para corrigir todo esse problema, basta retirar os parênteses:

botaoAdicionar.addEventListener(`click`, adicionarPaciente);

Assim, quando o evento for disparado, o próprio JavaScript irá essa função passando o evento como parâmetro.

Com isso você pode continuar normalmente como estava fazendo, recebendo o evento por parâmetro, que é o recomendo, pois a variável event provida no objeto global foi depreciada e não deve ser utilizada.

(Obs: Lembre-se de desfazer todas as modificações que você havia feito para resolver esse problema).

Caso fique com dúvidas, recomendo das uma olhadinha na própria documentação do método.

Espero ter ajudado, abraços e bons estudos :D

Muito obrigado Mateus! Funcionou normalmente. Dei uma lida mais afundo e vi que quando eu faço isso: botaoAdicionar.addEventListener(click, adicionarPaciente(evento)); eu estava invocando a função naquele instante, não no listener. Para isso, deveria usar a função sem parenteses.