Tämä viesti havainnollistaa 'event.target' ja sen käyttöä JavaScriptissä.
Mikä on 'event.target' JavaScriptissä?
' tapahtuma.kohde ' on '' ominaisuus/attribuutti tapahtuma ' JavaScriptissä. Se viittaa elementtiin, joka laukaisi tapahtuman. Jotta tapahtuma.target-attribuuttia voidaan käyttää, elementin tapahtumaa on kuunneltava. ' addEventListener() ” -menetelmää käytetään tietyn tapahtuman kuuntelemiseen.
Syntaksi
Käytä 'event.target'-ominaisuutta noudattamalla annettua syntaksia:
elementti. addEventListener ( '
konsoli. Hirsi ( tapahtuma. kohde )
} )
Annetussa syntaksissa
- ' addEventListener() ” -menetelmää käytetään tapahtumakäsittelijän lisäämiseen tietylle elementille.
- '
' tarkoittaa mitä tahansa tapahtumaa, kuten ' klikkaus ”, “ hiiren osoitin ', ja niin edelleen.
Esimerkki
Annetussa esimerkissä saamme tapahtuman käynnistäneen elementin käyttämällä ' tapahtuma.kohde ” omaisuutta.
Täällä luomme painikkeen määrittämällä tunnuksen ' btn ', jota käytetään JavaScriptissä painikkeen käyttämiseen:
< painikkeen tunnus = 'btn' > Klikkaa tästä -painiketta >
JavaScript-tiedostossa saamme ensin painikkeen viitteen käyttämällä sille määritettyä tunnusta '' getElementById() 'menetelmä:
konst -painiketta = asiakirja. getElementById ( 'btn' ) ;Liitä tapahtumakuuntelija -painikkeella. ' klikkaus ” -tapahtuma käynnistyy painikkeen napsautuksella ja tapahtumaobjekti välitetään tapahtuman kuuntelijalle argumenttina. ' tapahtuma.kohde ”-attribuutti on käytettävissä kuuntelijafunktiosta saadakseen viittauksen tapahtuman käynnistäneeseen painikeelementtiin:
-painiketta. addEventListener ( 'klikkaus' , toiminto ( tapahtuma ) {konsoli. Hirsi ( 'Kohdetapahtuma:' , tapahtuma. kohde ) ;
} ) ;
Tulos näyttää napsautetun painikkeen viittauksen:
Voit saada lisätietoja ja käyttää erilaisia toimintoja, kuten tyyliä kohdetapahtumassa sen attribuuttien avulla.
Mitkä ovat 'event.target' -attribuutit?
'event.target'-ominaisuudella on useita attribuutteja, jotka antavat tietoa kohdeelementistä. Muutamat event.target-objektin yleiset attribuutit ovat seuraavat:
| event.target-attribuutit | Kuvaus |
| event.target.tagname | Käytetään ' nimi ” kohdeelementin HTML-tunnisteen. |
| tapahtuma.kohde.arvo | Käytä '' arvo ” kohdeelementistä. Tätä attribuuttia käytetään enimmäkseen syöteelementeissä. |
| event.target.id | saadakseen ' id ” kohdeelementin attribuuttia, käytä annettua attribuuttia. |
| event.target.classList | Luettelo ' luokat Tämä attribuutti käyttää kohde-elementin sisältävää '. |
| event.target.textContent | Käytetään ' tekstin sisältö ” kohdeelementistä. |
| event.target.href | Tämä attribuutti hakee ' href ” kohdeelementin attribuutti, kuten linkit. |
| tapahtuma.kohde.tyyli | ' CSS ” kohdeelementin ominaisuutta, käytä tätä attribuuttia. |
Esimerkki 1: Muuta kohdeelementin taustaväriä
Esitetyssä esimerkissä muutamme kohdeelementin taustavärin käyttämällä ' tyyli ' attribuutti ' klikkaus ' tapahtuma:
konst -painiketta = asiakirja. getElementById ( 'btn' ) ;-painiketta. addEventListener ( 'klikkaus' , toiminto ( tapahtuma ) {
tapahtuma. kohde . tyyli . taustaväri = 'sininen' ;
} ) ;
Lähtö
Esimerkki 2: Hanki kohdeelementin arvo
Luo syöttötekstikenttä ja alue tekstin näyttämistä varten
-tunnisteen avulla. Määritä tunnukset syöttökenttään ja
-tunniste muodossa ' ota Input ' ja ' näytä ”, vastaavasti:
< syötteen tyyppi = 'teksti' id = 'takeInput' >< p id = 'näytä' > s >
Hanki tekstikentän viite käyttämällä ' getElementById() 'menetelmä:
oli syötetty = asiakirja. getElementById ( 'takeInput' ) ;Käytä ' arvo ' attribuutti ' tapahtuma.kohde ' saadaksesi kohdistetun elementin arvon:
syöttö. addEventListener ( 'syöttö' , ( tapahtuma ) => {asiakirja. getElementById ( 'näytä' ) . innerHTML = tapahtuma. kohde . arvo ;
} )
Kuten näet, tekstikenttään syötetty arvo on onnistuneesti haettu käyttämällä ' arvo 'määrite:
Siinä oli kyse JavaScriptin 'event.targetista'.
Johtopäätös
' tapahtuma.kohde ” viittaa elementtiin, joka laukaisi/käynnisti tapahtuman. Eräät 'event.target'-ominaisuuden attribuutit antavat tietoa kohdeelementistä. Esimerkiksi, ' event.target.tagname ”, “ .arvo ”, “ .id ”, “ .tyyli ', ja niin edelleen. Tämä viesti havainnollistaa 'event.target', sen attribuutteja ja sen käyttöä JavaScriptissä.