See postitus illustreerib 'event.target' ja selle kasutamist JavaScriptis.
Mis on JavaScriptis 'event.target'?
' sündmus.sihtmärk ” on „“ omadus/atribuut sündmus ” JavaScriptis. See viitab sündmuse käivitanud elemendile. Atribuudi event.target juurde pääsemiseks tuleb kuulata elemendi sündmust. ' addEventListener() ” meetodit kasutatakse konkreetse sündmuse kuulamiseks.
Süntaks
Atribuudi „event.target” kasutamiseks järgige antud süntaksit:
element. addEventListener ( '
konsool. logi ( sündmus. sihtmärk )
} )
Antud süntaksis
- ' addEventListener() ” meetodit kasutatakse konkreetse elemendi sündmusekäsitleja lisamiseks.
- “
' tähistab mis tahes sündmust, näiteks ' klõpsa ”, „ kursor üle ', ja nii edasi.
Näide
Antud näites saame sündmuse käivitanud elemendi kasutades ' sündmus.sihtmärk ” vara.
Siin loome nupu, määrates ID ' btn ', mida kasutatakse JavaScriptis nupule juurdepääsuks:
< nupu id = 'btn' > Kliki siia nuppu >
JavaScripti failis saame kõigepealt nupu viite, kasutades selleks määratud ID-d, kasutades ' getElementById() ” meetod:
konst nuppu = dokument. getElementById ( 'btn' ) ;Kinnitage sündmusekuulaja nupuga. ' klõpsa ” sündmus käivitatakse nupu klõpsamisel ja sündmuse objekt edastatakse argumendina sündmusekuulajale. ' sündmus.sihtmärk ” atribuut on juurdepääsetav kuulaja funktsioonist, et saada viide sündmuse käivitanud nupuelemendile:
nuppu. addEventListener ( 'klõps' , funktsioon ( sündmus ) {konsool. logi ( 'Sihtsündmus:' , sündmus. sihtmärk ) ;
} ) ;
Väljund näitab konkreetse klõpsatud nupu viidet:
Saate sihitud sündmusel selle atribuute kasutades hankida lisateavet ja rakendada erinevaid funktsioone, näiteks stiili kujundamist.
Millised on atribuudid 'event.target'?
Atribuudil „event.target” on mitmesuguseid atribuute, mis annavad teavet sihtelemendi kohta. Mõned objekti event.target levinud atribuudid on järgmised:
| event.target Atribuudid | Kirjeldus |
| event.target.tagname | Kasutatakse ' nimi ” sihtelemendi HTML-märgendist. |
| sündmus.sihtväärtus | Kasutage faili allalaadimiseks väärtus ” sihtelemendist. Seda atribuuti kasutatakse enamasti sisendelementide jaoks. |
| event.target.id | ' id ” sihtelemendi atribuuti, kasutage antud atribuuti. |
| event.target.classList | Nimekiri ' klassid Selle atribuudi abil pääseb juurde sihtelementi sisaldavale ” |
| event.target.textContent | Kasutatakse ' teksti sisu ” sihtelemendist. |
| event.target.href | See atribuut hangib ' href ” sihtelemendi atribuut, näiteks lingid. |
| sündmus.sihtmärk.stiil | ' CSS ', kasutage seda atribuuti. |
Näide 1: muutke sihtelemendi taustavärvi
Esitatud näites muudame sihtelemendi taustavärvi, kasutades ' stiilis ' atribuut ' klõpsa 'sündmus:
konst nuppu = dokument. getElementById ( 'btn' ) ;nuppu. addEventListener ( 'klõps' , funktsioon ( sündmus ) {
sündmus. sihtmärk . stiilis . taustavärv = 'sinine' ;
} ) ;
Väljund
Näide 2: hankige sihtelemendi väärtus
Looge märgendi
abil sisestusteksti väli ja ala teksti kuvamiseks. Määrake sisestusväljale ID-d ja märgend
kui ' võta sisend ” ja „ näidata ”, vastavalt:
< sisendi tüüp = 'tekst' id = 'võta sisend' >< p id = 'näita' > lk >
Hankige tekstivälja viide, kasutades ' getElementById() ” meetod:
oli sisend = dokument. getElementById ( 'võta sisend' ) ;Kasuta ' väärtus ' atribuut koos ' sündmus.sihtmärk ', et saada sihitud elemendi väärtus:
sisend. addEventListener ( 'sisend' , ( sündmus ) => {dokument. getElementById ( 'näita' ) . sisemine HTML = sündmus. sihtmärk . väärtus ;
} )
Nagu näete, et tekstikasti sisestatud väärtus on edukalt leitud, kasutades ' väärtus ” atribuut:
See kõik puudutas JavaScripti „event.target”.
Järeldus
' sündmus.sihtmärk ” viitab sündmuse käivitanud/algatanud elemendile. Mõned atribuudi „event.target” atribuudid annavad teavet sihtelemendi kohta. Näiteks, ' event.target.tagname ”, “ .väärtus ”, “ .id ”, “ .stiilis ', ja nii edasi. See postitus illustreeris sündmust „event.target”, selle atribuute ja kasutamist JavaScriptis.