Hvordan fjerne en hendelseslytter i JavaScript? | Forklart med eksempler

JavaScript er sterkt brukt i utvikling av websiden. Å være et dynamisk språk, det er lett å endre atferden til siden på kjøretid. Det er normalt lettere å bruke i klientsiden-miljøet, da vi er i stand til å gjøre endringer veldig raskt. I dag skal vi snakke om en annen JavaScript -operasjon, og det er slik vi enkelt kan fjerne hendelseslytteren fra et arrangement.

Fjerning av arrangementets lytter ved hjelp av JavaScript

Å fjerne hendelseslytteren fra et spesifikt HTML -element kan være så viktig i noen tilfeller, da du ikke vil at hendelsen skal bli utløst flere ganger uten noen grunn. JavaScript kan være veldig nyttig for å oppnå denne funksjonaliteten, så la oss se hvordan vi lett kan få denne jobben gjort.

RemoveEVentListener () -metode

RemoveEventListener () er en innebygd funksjon i JavaScript som kan brukes til å fjerne hendelseslyttere fra HTML-elementer.Anta at du har følgende hendelseslytter knyttet til et element:

Klikk på meg


Anta nå at du vil fjerne klikkhendelsen fra knappen, du trenger en referanse til både elementet som inneholder lytteren og tilbakeringingsfunksjonen for å fjerne en hendelseslytter effektivt. For å fjerne "klikk" -hendelsen, vil koden gå slik:

btn.RemoveEventListener ('Klikk', klikket)

Imidlertid er det ikke en god idé å passere en hendelseslytter en ikke navngitt tilbakeringingsfunksjon som denne:

btn.AddEventListener ('klikk', (e) =>
Varsel ('Denne knappen ble klikket');
)

Du vil ikke kunne fjerne hendelseslytteren uten tilbakeringingsfunksjonsnavnet, som sett i eksemplet over.

Fjerne hendelseslytteren etter å ha klikket på knappen

Noen ganger vil du kanskje ikke at knappen skal klikkes to ganger som om den skal klikkes, hendelsen vil utløse og forårsake behandlingsproblemer under arrangementet. Så for å håndtere dette problemet umiddelbart må vi legge ved en RemoveEventListener () inne i AddEvenTlistener () metode. La oss se hvordan vi kan oppnå denne funksjonaliteten i koden nedenfor:

Klikk på meg

Produksjon:

Så med eksemplet ovenfor, når knappen ble klikket, vil den utløse hendelsen som er knyttet til den og fjerne den hendelsen etter å ha deaktivert knappen for å unngå flere klikk samtidig fra brukeren.

Slik blir du kvitt JavaScript -arrangementslyttere fra HTML -elementer. For å fjerne en hendelseslytter fra et HTML -element, må du ta vare på de to tingene, du må definere typen arrangement, og den andre tingen er at du må tilby referansefunksjonen som er knyttet til hendelseslytteren.

Konklusjon

De RemoveEventListener () Metoden brukes når du må fjerne hendelsen fra et bestemt HTML -element. Denne metoden krever to argumenter, det første argumentet vil være hendelsesnavnet mens det andre argumentet vil være funksjonen som er knyttet til hendelseslytteren. I denne artikkelen har vi sett eksemplet der vi har diskutert hvordan vi ganske enkelt kan fjerne en hendelse knyttet til et HTML -element.