Hvordan legge til en hendelsesbehandler til et element i JavaScript

Hendelsesbehandleren generelt er det kodestykket som kontrollerer hendelser. Den dikterer programvaren om handlingene den skal ta når en hendelse inntreffer. JavaScript -hendelsesbehandlere påkaller et bestemt stykke kode når en spesifikk hendelse inntreffer til et HTML -element. Du kan legge til en eller flere enn en hendelsesbehandler til et HTML -element som vil fungere på et relevant stykke kode på grunnlag av den typen hendelse som oppstår for HTML -elementet. Denne oppskrivningen diskuterer dyptgående måter å legge til hendelsesbehandlere til et HTML-element i JavaScript.

Hvordan legge til en hendelsesbehandler til et element i JavaScript

JavaScript gir AddEventListener () som lar deg legge til en hendelsesbehandler til et HTML -element. Denne metoden binder en hendelse til et HTML -element, dessuten legger den til en hendelsesbehandler til et bestemt HTML -element uten å overskrive noen hendelsesbehandler som allerede eksisterer på det elementet.

Syntaks

element.AddEventListener (EventType, EventListener);

Eksempel

Anta at du vil legge til en hendelsesbehandler som binder klikkhendelsen til et element.

Klikk på meg

I eksemplet ovenfor oppretter vi en knapp ved hjelp av følgende kode.

Klikk på meg

Ved hjelp av AddEventListener () -metoden legger vi til en klikkhendelse til knappen.

dokument.getElementById ("knapp").AddEventListener ("klikk", funksjonsnavn);
funksjonsfunksjonsnavn ()
dokument.getElementById ("Tutorial").indrehtml = "Du klikket meg!";

Når du klikker på knappen, vises det en merknad som forteller deg at du bare klikket på knappen. Vi har vist utdataene nedenfor.

Mer om hendelsesbehandlere!

1. Det er mulig å legge til forskjellige hendelsesbehandlere eller forskjellige hendelsesbehandlere av samme art til et bestemt element.

Eksempel

Følgende er et eksempel på å legge til to tastetrykkhendelser til et inngangsfelt ved bruk av AddEventListener () -metode.

I eksemplet ovenfor legger følgende kode to keypress -hendelser til et inngangsfelt.

funksjon FirstFunction ()
Varsel ("Første KeyPress -hendelse skjedde!");

funksjon SecondFunction ()
Varsel ("Andre keypress -arrangement skjedde!");

Når du trykker på en tastaturtast mens du er inne i inngangsfeltet, vil det første keypress -hendelsen oppstå.

Etter at du har klikket OK i dialogboksen, vil andre KeyPress skje.

2. Hendelsesbehandlere kan også legges til DOM -objekter.

3. Hendelsesbehandlere dedikerer oppførselen til hendelser på hvordan disse reagerer på bobling.

4. For å øke lesbarheten, deles JavaScript opp fra HTML -markering når AddEventListener () -metoden brukes.

5. Mens du bruker AddEventListener () -metoden, kan du også bruke begivenhetsbobling eller begivenhetsfangst, men den er helt valgfri.

I hendelsen som bobler hendelsen av indre, drives mest element først og hendelsen av ytre mest element senere. Imidlertid, i tilfelle å fange hendelsen av det ytre mest elementet, betjenes først og hendelsen av indre mest element senere.

Syntaks for bruk av begivenhetsbobling og fangst er som følger.
element.AddEventListener (hendelse, funksjon, usecapture);

Merk: I syntaks ovenfor, som standard er parameterverdien falsk som betyr at hendelser bobler vil skje, men hvis du passerer parameterverdien som sant, vil hendelsesfangst skje.

Eksempel

Følgende er et eksempel på boblende forplantning.

Dette er boblende forplantning.


Klikk på meg!

I eksemplet ovenfor lager vi en

element som foreldreelement og element som barneelement.

Dette er boblende forplantning.


Klikk på meg!

Bruker deretter brukt til å legge til en klikkhendelse ved hjelp av AddEventListener () -metode sammen med Bubbling Propagation.

dokument.getElementById ("Button1").AddEventListener ("Klikk", funksjon ()
Varsel ("Du klikket på knappen!");
, falsk);
dokument.getElementById ("para1").AddEventListener ("Klikk", funksjon ()
Varsel ("Du klikket på avsnittet!");
, falsk);

Når du utfører dette programmet, og klikker på knappen først, deretter vil Bubbling Propagation betjene klikkhendelsen på knappen (indre element) først og avsnittet (ytre element) senere. Her er utgangen.

Når du nå klikker OK, vil Bubbling Propagation utføre klikkhendelse på avsnittet.

Bruke det samme eksemplet, hvis du passerer parameterverdien som sant, vil det skje å fange utbredelse.

Dette er boblende forplantning.


Klikk på meg!

Hvis du klikker på barnelementet (knappen) først, vil du fange opp forplantning av klikkhendelsen på avsnitt (ytre element) Først og knapp (indre element) senere. Vi har vist utdataene nedenfor.

Etter å ha klikket OK, klikker du hendelsen på elementet.

6. Det er også mulig å fjerne en hendelsesbehandler ved hjelp av RemoveEventListener () -metoden.

Konklusjon

JavaScript gir AddEventListener () -metode som lar deg binde en hendelsesbehandler til et element. Du kan knytte forskjellige hendelsesbehandlere av samme art til et bestemt element, foruten HTML -elementer kan du også legge til hendelsesbehandlere til DOM -objekter. Du kan også legge til boblende forplantning og fange utbredelse ved hjelp av AddEventListener () -metoden. Denne oppskrivningen diskuterer i detalj, tilnærminger til å legge til hendelsesbehandlere til et element ved hjelp av JavaScript sammen med passende eksempler.