Dette indlæg vil illustrere 'event.target' og dets brug i JavaScript.
Hvad er 'event.target' i JavaScript?
Det ' begivenhed.mål ' er en egenskab/attribut for ' begivenhed ' i JavaScript. Det refererer til det element, der udløste hændelsen. For at få adgang til attributten event.target skal elementets hændelse lyttes til. Det ' addEventListener() ”-metoden bruges til at lytte til den specifikke begivenhed.
Syntaks
For at bruge egenskaben 'event.target' skal du følge den givne syntaks:
element. addEventListener ( '
konsol. log ( begivenhed. mål )
} )
I den givne syntaks,
- Det ' addEventListener() ” metode bruges til at tilføje en hændelseshandler for det specifikke element.
- “
' angiver enhver begivenhed, såsom ' klik ', ' mus over ', og så videre.
Eksempel
I det givne eksempel vil vi få det element, der udløste hændelsen ved hjælp af ' begivenhed.mål ” ejendom.
Her vil vi oprette en knap ved at tildele et id ' btn ', der bruges i JavaScript til at få adgang til knappen:
< knap-id = 'btn' > Klik her knap >
I JavaScript-filen får vi først referencen til knappen ved hjælp af dens tildelte id ved hjælp af ' getElementById() ” metode:
konst knap = dokument. getElementById ( 'btn' ) ;Tilslut en begivenhedslytter med knappen. Det ' klik ” hændelsen startes ved et klik på knappen, og hændelsesobjektet sendes til hændelseslytteren som et argument. Det ' begivenhed.mål ”-attributten er tilgængelig fra lytterfunktionen for at få en reference til det knapelement, der udløste hændelsen:
knap. addEventListener ( 'klik' , funktion ( begivenhed ) {konsol. log ( 'Målhændelse:' , begivenhed. mål ) ;
} ) ;
Outputtet viser referencen for den specifikke knap, der klikkes på:
Du kan få flere oplysninger og anvende forskellige funktionaliteter som styling på den målrettede begivenhed ved hjælp af dens attributter.
Hvad er egenskaberne for 'event.target'?
Der er forskellige attributter for egenskaben 'event.target', der giver oplysninger om målelementet. Få af de almindelige attributter for event.target-objektet er som følger:
| event.target Attributter | Beskrivelse |
| event.target.tagname | Bruges til at få ' navn ” af HTML-tagget for målelementet. |
| begivenhed.målværdi | Brug til at hente ' værdi ” af målelementet. Denne attribut bruges mest til input-elementer. |
| event.target.id | For at få ' id ” attribut for målelementet, skal du bruge den givne attribut. |
| event.target.classList | Listen over ' klasser ”, der indeholder målelementet, tilgås af denne attribut. |
| event.target.textContent | Bruges til at få ' tekstindhold ” af målelementet. |
| event.target.href | Denne attribut henter ' href ” attribut for målelementet, såsom links. |
| begivenhed.mål.stil | For at ændre ' CSS ' egenskab for målelementet, brug denne attribut. |
Eksempel 1: Skift baggrundsfarven for målelementet
I det medfølgende eksempel vil vi ændre baggrundsfarven på målelementet ved at bruge ' stil ' attribut på ' klik ' begivenhed:
konst knap = dokument. getElementById ( 'btn' ) ;knap. addEventListener ( 'klik' , funktion ( begivenhed ) {
begivenhed. mål . stil . baggrundsfarve = 'blå' ;
} ) ;
Produktion
Eksempel 2: Få værdien af målelementet
Opret et input tekstfelt og et område til at vise tekst ved hjælp af
tag. Tildel id'er til inputfeltet og
tag som ' tag input ' og ' at vise ', henholdsvis:
< input type = 'tekst' id = 'tag input' >< p id = 'at vise' > s >
Hent referencen til tekstfeltet ved at bruge ' getElementById() ” metode:
var input = dokument. getElementById ( 'tag input' ) ;Brug ' værdi ' attribut med ' begivenhed.mål ' for at få værdien af det målrettede element:
input. addEventListener ( 'input' , ( begivenhed ) => {dokument. getElementById ( 'at vise' ) . indreHTML = begivenhed. mål . værdi ;
} )
Som du kan se, at værdien, der er indtastet i tekstboksen, er blevet hentet med ' værdi ' attribut:
Det var alt om 'event.target' i JavaScript.
Konklusion
Det ' begivenhed.mål ” refererer til det element, der udløste/initierede hændelsen. Der er nogle attributter for egenskaben 'event.target', der giver oplysninger om målelementet. For eksempel, ' event.target.tagname ', ' .værdi ', ' .id ', ' .stil ', og så videre. Dette indlæg illustrerede 'event.target', dets attributter og dets brug i JavaScript.