Tipo de Eventos: addEventListener('click', ...) vs addEventListener('submit', ...)

element.addEventListener(event, function, useCapture);

element: É aqui que você adiciona o addEventListener;

addEventListener: Um método(função) que adiciona o manipulador de eventos ao elemento especificado;

event: Tipo do evento (ex: “click”, “submit”, “mousedown”).;

function: A função que queremos chamar(executar) quando o evento acontecer;

useCapture: Um argumento opcional que retorna(fornece) um valor booleano(true or false), se o evento será realizado na fase de captura ou na fase de borbulhamento.

Imagem ilustrativa da fase de captura e da fase de borbulhamento: https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg

Evento de ‘click’ EventListeners

O ‘click’ do EventListener é usado quando você precisa que um usuário clique em um elemento para acessar informações adicionais, mudar de página, ir para um formulário, etc. Por exemplo, se eu quiser que o clique esteja no botão que diz “Editar”, eu usaria as seguintes linhas de código:

Imagem ilustrativa: https://miro.medium.com/max/4560/1*szeKBHWoVqoWqScN_XPciA.png

Evento de ‘submit’ EventListeners

O ‘submit’ do EventListeners é usado em formulários que o usuário enviará. Como resultado, o EventListener não é atrelado ao botão de envio, mas ao próprio formulário.

Imagem ilustrativa: https://miro.medium.com/max/700/1*6a_S67DCIr29wfKrPQFO2w.png

O e.preventDefault () evita a configuração padrão de envio do EventListener.

Em resumo, certifique-se de que o ‘click’ do EventListener esteja anexado ao elemento onde o usuário deve clicar. O ‘submit’ do EventListener deve ser anexado ao elemento de formulário que o usuário está enviando.

Traduzido: https://betterprogramming.pub/click-vs-submit-eventlisteners-536b62be9359

Os meus dois centavos de contribuição! :)