Como remover um ouvinte de evento em javascript? | Explicado com exemplos

JavaScript é altamente usado no desenvolvimento da página da web. Sendo uma linguagem dinâmica, é fácil alterar os comportamentos da página no tempo de execução. Normalmente é mais fácil de usar no ambiente do lado do cliente, pois somos capazes de fazer mudanças muito rapidamente. Hoje vamos falar sobre outra operação de JavaScript, que é como podemos remover facilmente o ouvinte do evento de um evento.

Removendo o ouvinte do evento usando JavaScript

Remover o ouvinte do evento de um elemento HTML específico pode ser tão importante em alguns casos, pois você não deseja que o evento seja acionado várias vezes sem motivo. JavaScript pode ser muito útil para alcançar essa funcionalidade, então vamos ver como podemos fazer esse trabalho facilmente.

Método RemoneventListener ()

RemoneventListener () é uma função interna no JavaScript que pode ser usado para remover os ouvintes de eventos dos elementos HTML.Suponha que você tenha o seguinte ouvinte de evento anexado a um elemento:

Clique em mim


Agora, suponha que você queira remover o evento de clique do botão, você precisará de uma referência ao elemento que contém o ouvinte e a referência da função de retorno de chamada para remover um ouvinte de evento efetivamente. Para remover o evento "clique", o código será assim:

btn.RemoneeventListener ('clique', clique)

No entanto, não é uma boa ideia passar por um ouvinte de evento uma função de retorno de chamada sem nome como esta:

btn.addEventListener ('clique', (e) =>
alerta ('este botão foi clicado');
)

Você não poderá remover o ouvinte do evento sem o nome da função de retorno de chamada, como visto no exemplo acima.

Removendo o ouvinte do evento depois de clicar no botão

Às vezes, você pode não querer que o botão seja clicado duas vezes como se fosse clicado, o evento acionará e causará os problemas de processamento no evento. Então, para lidar com esse problema instantaneamente, precisamos anexar um RemoneeventListener () dentro de addEveNetListener () método. Vamos ver como podemos alcançar essa funcionalidade no código abaixo:

Clique em mim

Saída:

Portanto, com o exemplo acima, uma vez que o botão foi clicado, ele acionará o evento anexado a ele e remover esse evento após desativar o botão para evitar vários cliques ao mesmo tempo do usuário.

É assim que você se livra dos ouvintes de eventos JavaScript da HTML Elements. Para remover um ouvinte de eventos de um elemento HTML, você precisa cuidar das duas coisas, você deve definir o tipo de evento e a segunda coisa é que você precisa fornecer a função de referência que é anexada ao ouvinte do evento.

Conclusão

O RemoneeventListener () O método é usado sempre que você precisar remover o evento de um elemento HTML específico. Este método requer dois argumentos, o primeiro argumento será o nome do evento, enquanto o segundo argumento será a função que será anexada ao ouvinte do evento. Neste artigo, vimos o exemplo em que discutimos como podemos simplesmente remover um evento anexado a um elemento HTML.