O front-end por meio dos parâmetros de addEventListener, bem como o método de propagação de evento HTML DOM (bolha e captura)

addEventListener ()

· Ouvinte de evento AddEventListener (), você pode usar removeEventListener () para remover o ouvinte de evento.
· AddEventListener () anexa o manipulador de eventos ao elemento especificado sem sobrescrever o manipulador de eventos existente.
· AddEventListener () pode ser adicionado a qualquer objeto DOM, incluindo objetos de janela.

Sintaxe : element.addEventListener (event, function, useCapture);
Parâmetros :

1. evento: o tipo de evento, clique, mouse, etc. Não há prefixo on.
2. função: a função a ser executada quando o evento ocorrer
3. useCapture: Especifique se deseja usar o bubbling de evento ou a captura de evento. É um valor booleano: o padrão é falso, ou seja, é usado o bubbling de evento; quando o valor é verdadeiro, é usada a captura de evento.

exemplo

element.addEventListener("click", function(){
    
     alert("Hello World!"); });

Você também pode escrever a função externamente e usar o nome da função como o segundo parâmetro:

element.addEventListener("click", myFunction);
function myFunction() {
    
    
  alert ("Hello World!");
}

É permitido adicionar vários eventos ao mesmo elemento sem substituir os eventos originais.

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Borbulhamento de eventos e captura de eventos

O HTML DOM tem dois métodos de propagação de eventos: bolha de eventos e captura de eventos.
Por exemplo: se houver um elemento p no elemento div, quando o usuário clicar no elemento p, o elemento p deve ser processado primeiro ou o evento do elemento div deve ser processado primeiro?

1. Borbulhamento de eventos: processe primeiro o evento do elemento interno e, a seguir, acione o elemento externo; ou seja, processe primeiro o elemento p e, em seguida, processe o elemento div.
2. Captura de evento: processe primeiro o evento do elemento externo e, a seguir, acione o elemento interno. Ou seja, o elemento div é processado primeiro e, em seguida, o elemento p é processado.

Remoção de evento removeEventListener ()

element.removeEventListener("mousemove", myFunction);