Quando o usuário clica em um botão ou há uma alteração em um formulário, isso é conhecido como um evento. Em seus programas, você precisará ter uma maneira de escutar esses eventos e responder a eles. O método addEventListener() é usado para escutar eventos. Ele recebe dois argumentos: o evento que você quer escutar e uma função que será chamada quando o evento ocorrer. Aqui está a sintaxe básica:

element.addEventListener("event", listener);

O elemento é o elemento HTML a ser monitorado para eventos e event especifica o tipo de evento a ser escutado, como "click". O listener é um objeto que receberá a notificação quando o evento ocorrer. Na maioria das vezes, esta será uma função que você define para lidar com o evento. Aqui está um exemplo:

element.addEventListener("click", () => {
  // code to run when the click event occurs
});

Você também pode optar por passar uma referência de função assim:

function handleClick() {
  // code to run when the click event occurs
}

element.addEventListener("click", handleClick);

Às vezes você pode querer criar uma função separada para lidar com o evento. Isso pode tornar seu código mais fácil de ler e manter. O argumento listener também pode ser null ou pode ser um objeto que usa a interface EventListener. A interface EventListener define um único método chamado handleEvent(). Este método é chamado automaticamente sempre que o evento que você está ouvindo ocorre. Usar esta interface permite que o mesmo objeto lide com múltiplos eventos se necessário. Na maioria das vezes, você não precisará usar esta interface e poderá passar uma função que será chamada quando o evento ocorrer. Agora, vamos dar uma olhada em um exemplo para entender melhor como isso funciona: Neste exemplo, temos um elemento button com o id btn:

<button id="btn">Show alert</button>

Queremos escutar o evento "click" neste botão e mostrar um alerta quando o botão for clicado. Primeiro precisamos acessar aquele elemento button no nosso código JavaScript. Então precisamos adicionar um event listener para escutar o evento de click e mostrar um alerta quando o botão for clicado:

<button id="btn">Show alert</button>
<script src="index.js"></script>

const btn = document.getElementById("btn");

btn.addEventListener("click", () => alert("You clicked the button"));

Agora, cada vez que o botão for clicado, o usuário verá uma mensagem de alerta exibida na tela assim:

You clicked the button

Outro tipo de evento que você pode escutar é o evento "input". Este evento é acionado quando o valor de um elemento de entrada muda. Aqui está um exemplo:

<input type="text" id="input" placeholder="Type something" />

Queremos escutar o evento input neste elemento input e registrar o valor do input no console cada vez que o usuário digitar algo. Primeiro precisamos acessar aquele elemento input no nosso código JavaScript. Então precisamos adicionar um event listener para escutar o evento input e registrar o valor do input no console cada vez que o usuário digitar algo:

<input type="text" id="input" placeholder="Type something" />
<script src="index.js"></script>

const input = document.getElementById("input");

input.addEventListener("input", () => {
  console.log(input.value);
});

Existem muitos outros eventos que você pode escutar usando o método addEventListener(). Alguns eventos comuns incluem mouseover, mouseout, keydown, keyup e submit. Nas próximas aulas, abordaremos mais eventos e como usar o método addEventListener() para escutá-los.