Na lição anterior, você aprendeu como trabalhar com os eventos "click" e "input" usando o método addEventListener(). Nesta lição, você aprenderá como remover event listeners usando o método removeEventListener(). O método removeEventListener() é usado para remover um event listener que foi previamente adicionado a um elemento usando o método addEventListener(). Isso é útil quando você quer parar de escutar um evento específico em um elemento. Aqui está a sintaxe básica para o método removeEventListener():

element.removeEventListener("event", listener);

Assim como o método addEventListener(), o método removeEventListener() recebe dois argumentos: o evento que você deseja remover e a função listener que foi adicionada anteriormente. Também há um terceiro argumento opcional adicional que pode ser passado para o método removeEventListener(). Este argumento pode ser options ou useCapture. O argumento options é um objeto que especifica as opções para o event listener, como se o event listener deve ser passive ou once. O argumento useCapture é um valor booleano que especifica se o evento deve ser capturado durante a fase de propagação do evento. Na maioria das vezes, você só precisará passar os argumentos event e listener para o método removeEventListener(). Vamos dar uma olhada em um exemplo para entender melhor como o método removeEventListener() funciona: Aqui está um exemplo com algum HTML:

<link rel="stylesheet" href="styles.css" />
<h1>Event Listener examples</h1>
<button id="btn">Change background color</button>

button {
  background: linear-gradient(135deg, #4da3ff, #007bff);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

Se quisermos alternar a cor de fundo entre cinza e azul, então podemos usar um event listener para isso. Primeiro precisamos acessar o elemento button junto com o elemento body:

const bodyEl = document.querySelector("body");
const btn = document.getElementById("btn");

Então precisamos criar a função responsável por alternar entre as cores cinza e azul:

let isBgColorGrey = true;

function toggleBgColor() {
  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
  isBgColorGrey = !isBgColorGrey;
}

Estamos usando uma variável booleana isBgColorGrey para acompanhar a cor de fundo atual. Se a cor de fundo for cinza, então a alteramos para azul e vice-versa. Então precisamos adicionar um event listener ao elemento button para chamar a função toggleBgColor quando o botão for clicado:

btn.addEventListener("click", toggleBgColor);

Aqui está o exemplo completo até agora:

<link rel="stylesheet" href="styles.css" />
<h1>Event Listener examples</h1>
<button id="btn">Change background color</button>
<script src="index.js"></script>

button {
  background: linear-gradient(135deg, #4da3ff, #007bff);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

button:hover {
  background: linear-gradient(135deg, #66b3ff, #3399ff);
  box-shadow: 0 6px 14px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

const bodyEl = document.querySelector("body");
const btn = document.getElementById("btn");

let isBgColorGrey = true;

function toggleBgColor() {
  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
  isBgColorGrey = !isBgColorGrey;
}

btn.addEventListener("click", toggleBgColor);

Cada vez que o botão for clicado, a cor de fundo do body mudará entre cinza e azul. Podemos atualizar o HTML para incluir um elemento de parágrafo que será usado para remover o event listener quando o cursor passar sobre ele:

<link rel="stylesheet" href="styles.css" />
<h1>Event Listener examples</h1>
<p id="para">MouseOver this text to remove the event listener</p>
<button id="btn">Change background color</button>
<script src="index.js"></script>

Para remover o event listener quando o parágrafo é hoverado, podemos adicionar um event listener ao elemento do parágrafo. Estamos usando o evento mouseover e passando uma função que remove o event listener do elemento button:

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

para.addEventListener("mouseover", () => {
  btn.removeEventListener("click", toggleBgColor);
});

Quando o parágrafo é sobreposto, o listener de evento para o evento de clique do botão é removido e a cor de fundo não mudará mais quando o botão for clicado. Aqui está o exemplo completo com o método removeEventListener():

<link rel="stylesheet" href="styles.css" />
<h1>Event Listener examples</h1>
<p id="para">MouseOver this text to remove the event listener</p>
<button id="btn">Change background color</button>
<script src="index.js"></script>

button {
  background: linear-gradient(135deg, #4da3ff, #007bff);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

button:hover {
  background: linear-gradient(135deg, #66b3ff, #3399ff);
  box-shadow: 0 6px 14px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

const bodyEl = document.querySelector("body");
const para = document.getElementById("para");
const btn = document.getElementById("btn");

let isBgColorGrey = true;

function toggleBgColor() {
  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
  isBgColorGrey = !isBgColorGrey;
}

btn.addEventListener("click", toggleBgColor);

para.addEventListener("mouseover", () => {
  btn.removeEventListener("click", toggleBgColor);
});

Exemplos do mundo real de quando usar o método removeEventListener() incluem remover event listeners quando um modal é fechado em uma aplicação web ou quando um usuário faz logout de uma aplicação.