Sådan håndteres begivenhedshåndtering i JavaScript (eksempler og alle)

I denne blog vil jeg forsøge at gøre det grundlæggende klart for begivenhedshåndteringsmekanismen i JavaScript uden hjælp fra noget eksternt bibliotek som Jquery / React / Vue.

Jeg vil forklare følgende emner i denne artikel:

  1. Det dokument og vindue objekter, og tilføje event Lyttere til dem.
  2. Metoden Event.preventDefault () og dens anvendelse.
  3. Metoden Event.stopPropagation () med et eksempel.
  4. Sådan fjernes en begivenhed lytteren fra et element.

Dokument og vinduer objekter med event Lyttere

Window-objektet repræsenterer fanen. Hvis du læser denne blog i din tilsvarende browser, repræsenterer din aktuelle fane Window-objektet.

Vindueobjektet har adgang til sådanne oplysninger som værktøjslinjen, vinduets højde og bredde, meddelelser og alarmer. Lad os se, hvordan vi kan tilføje en begivenhedslytter (mousedown) til vindueobjektet og analysere nogle af dens egenskaber.

Sådan tilføjes lytteren til vindueobjektet

Den addEventListener metode er den mest foretrukne måde at tilføje en begivenhed lytteren til vinduet , dokument eller andet element i DOM.

Der er en anden måde, der kaldes "on" ejendom onclick, onmouseover osv. Men det er ikke så nyttigt, da det ikke tillader os at tilføje flere begivenhedslyttere på det samme element. De andre metoder tillader det.

Et begivenhedsobjekt sendes som et argument (valgfrit) til handleren, der indeholder alle de oplysninger, der er relateret til begivenheden (i vores tilfælde musefald) i vinduet.

Åbn udviklerværktøjerne (Inspicer element) på denne side, og kopi indsæt følgende kode i konsolpanelet og tryk på enter.

window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });

Derefter kan du gå over til ethvert afsnit af den aktuelle fane og højreklikke for at se konsollen og informationen relateret til denne begivenhed, som vist nedenfor i øjebliksbillede.

Bemærk : Hvis du går til en hvilken som helst anden fane og højreklikker, bliver denne begivenhed ikke fyret, da den kun hører til denne fane (Window-objekt).

Detaljerne om mousedown-begivenheden

I de næste par linjer vil jeg forklare nogle af de vigtige fangede ejendom, der svarer til mouseDown begivenhed vi bare udført.

knap : Da dette var mouseown-begivenheden, fortæller den dig knappen, du klikkede på. For musen svarer venstre, midterste og højre til henholdsvis 0, 1 og 2. Hvis du klikker på højre knap, kan du se værdien 2.

clientX og clientY : Position i forhold til øverst til venstre i indholdsområdet (Viewport). Bare analyser værdien af ​​disse egenskaber med det sted, du klikkede på, så kan du se, hvordan de er relaterede. Selvom du ruller ned på siden, forbliver disse egenskaber de samme. ScreenX og ScreenY-reference øverst til venstre på skærmen (Monitor).

altkey / ctrlkey : Hvis du holder nogen af ​​disse taster nede, mens du udfører din højreklikoperation, kan du se, at disse værdier er sande. Ellers er de falske som i vores tilfælde.

mål: Det svarer til det element, du udførte handlingen på. Uanset hvilket element du måske har klikket på, kan du se de oplysninger, der svarer til denne egenskab i konsollen

Hvad er et dokumentobjekt ?

Dokumentet består af, hvad der er inde i det indre vindue. Det dokument objekt er roden til hver node i DOM. Hvis du indlæser en HTML-side i browseren, repræsenterer dokumentet hele siden.

Metoden Event.preventDefault () og dens anvendelse

Engang ønsker vi ikke, at et HTML-element opfører sig som det skal opføres som standard. I et sådant tilfælde kan vi bruge denne metode.

Eksempel : Ved at klikke på ankerelementet omdirigeres browseren som standard til den side. Lad os prøve at undgå det.

  Google  let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); });   

Du kan oprette en HTML-fil og tjekke denne kode.

Den Event.stopPropagation () metode

Begivenheder flyder udad. Der er visse tilfælde, f.eks. Når du har indlejrede elementer, og du udfører en begivenhed på et barn, og det ender med at udføre en handling på forældren, som du også vil undgå. I sådanne tilfælde er denne metode nyttig.

Det lyder lidt forvirrende, men jeg håber, at nedenstående eksempel gør det klart for dig.

Forestil dig, at du har en knap inde i et afsnit, og at du har knyttet en mousedown-begivenhed til dem begge. Du ønsker at opnå følgende brugstilfælde:

  1. Hvis du højreklikker på knappen, skal den vise, at der er klikket på den og ikke spredes til det overordnede element (dvs. afsnittet).
  2. Hvis du venstreklikker på knappen, skal den normalt sprede sig udad og skyde også afsnittet lytter til afsnit.

Opløsning:

Hello Ho Button2

// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); });

Fjernelse af en begivenhedslytter fra et element

For at fjerne en begivenhedslytter fra et element skal vi kalde metoden removeEventListener med begivenhedsnavnet og funktionsnavnet.

Bemærk : når anonyme funktioner overføres, har de ikke hukommelseskortlægning. Så vi er nødt til at definere disse funktioner uden for tilbagekaldet og derefter henvise til dem her i removeEventListener tilbagekald.

Document.getElementbyId("id_name").removeEventListener("click",fn_name)

Hvis du har nået dette punkt, skal du have en anstændig forståelse af, hvordan begivenhedslyttere fungerer i JavaScript.

Hvis du nogensinde sidder fast i begivenhedshåndteringsdelen, mens du arbejder med dit foretrukne bibliotek / rammer, så skal disse grundlæggende hjælpe dig med at løse problemet.