Šī ziņa ilustrēs “event.target” un tā lietojumu JavaScript.
Kas ir “event.target” JavaScript?
' notikums.mērķis ' ir '' īpašums/atribūts notikumu ” JavaScript. Tas attiecas uz elementu, kas izraisīja notikumu. Lai piekļūtu atribūtam event.target, ir jānoklausās elementa notikums. ' addEventListener() ” metode tiek izmantota konkrētā notikuma klausīšanai.
Sintakse
Lai izmantotu rekvizītu “event.target”, ievērojiet norādīto sintakse:
elements. addEventListener ( '
konsole. žurnāls ( notikumu. mērķis )
} )
Dotajā sintaksē,
- ' addEventListener() ” metode tiek izmantota, lai pievienotu notikumu apstrādātāju konkrētajam elementam.
- '
' apzīmē jebkuru notikumu, piemēram, ' klikšķis ”, “ kursoru ', un tā tālāk.
Piemērs
Dotajā piemērā mēs iegūsim elementu, kas aktivizēja notikumu, izmantojot ' notikums.mērķis ” īpašums.
Šeit mēs izveidosim pogu, piešķirot ID ' btn ”, kas tiek izmantots JavaScript, lai piekļūtu pogai:
< pogas id = 'btn' > Noklikšķiniet šeit pogu >
Vispirms JavaScript failā mēs iegūsim pogas atsauci, izmantojot tai piešķirto ID, izmantojot “ getElementById() ” metode:
konst pogu = dokumentu. getElementById ( 'btn' ) ;Pievienojiet notikumu klausītāju ar pogu. ' klikšķis ” notikums tiek uzsākts, noklikšķinot uz pogas, un notikuma objekts tiek nodots notikumu uztvērējam kā arguments. ' notikums.mērķis ” atribūts ir pieejams no klausītāja funkcijas, lai iegūtu atsauci uz pogas elementu, kas aktivizēja notikumu:
pogu. addEventListener ( 'klikšķis' , funkcija ( notikumu ) {konsole. žurnāls ( 'Mērķa pasākums:' , pasākums. mērķis ) ;
} ) ;
Izvade parāda atsauci uz konkrēto pogu, uz kuras tiek noklikšķināts:
Izmantojot tā atribūtus, varat iegūt vairāk informācijas un izmantot dažādas funkcijas, piemēram, stilu veidošanu atlasītajam notikumam.
Kādi ir “event.target” atribūti?
Ir dažādi rekvizīta “event.target” atribūti, kas sniedz informāciju par mērķa elementu. Daži no parastajiem objekta event.target atribūtiem ir šādi:
| event.target atribūti | Apraksts |
| event.target.tagname | Izmanto, lai iegūtu “ nosaukums ” no mērķa elementa HTML taga. |
| notikums.mērķa vērtība | Izmantojiet, lai izgūtu “ vērtību ” no mērķa elementa. Šo atribūtu galvenokārt izmanto ievades elementiem. |
| event.target.id | Lai iegūtu ' id ” mērķa elementa atribūtu, izmantojiet doto atribūtu. |
| event.target.classList | Saraksts ' klases ', kas satur mērķa elementu, var piekļūt ar šo atribūtu. |
| event.target.textContent | Izmanto, lai iegūtu “ teksta saturs ” no mērķa elementa. |
| event.target.href | Šis atribūts izgūst ' href ” mērķa elementa atribūts, piemēram, saites. |
| notikums.mērķis.stils | Lai mainītu ' CSS ”, izmantojiet šo atribūtu. |
1. piemērs: mainiet mērķa elementa fona krāsu
Norādītajā piemērā mēs mainīsim mērķa elementa fona krāsu, izmantojot “ stils ' atribūts uz ' klikšķis ”pasākums:
konst pogu = dokumentu. getElementById ( 'btn' ) ;pogu. addEventListener ( 'klikšķis' , funkcija ( notikumu ) {
notikumu. mērķis . stils . fona krāsa = 'zils' ;
} ) ;
Izvade
2. piemērs: iegūstiet mērķa elementa vērtību
Izveidojiet ievades teksta lauku un apgabalu teksta rādīšanai, izmantojot tagu
. Piešķiriet ID ievades laukam un
tagu kā ' takeInput ' un ' parādīt ”, attiecīgi:
< ievades veids = 'teksts' id = 'ņemt ievadi' >< p id = 'izrādīt' > lpp >
Iegūstiet atsauci uz teksta lauku, izmantojot ' getElementById() ” metode:
tika ievadīta = dokumentu. getElementById ( 'ņemt ievadi' ) ;Izmantojiet ' vērtību ' atribūts ar ' notikums.mērķis ”, lai iegūtu mērķētā elementa vērtību:
ievade. addEventListener ( 'ievade' , ( notikumu ) => {dokumentu. getElementById ( 'izrādīt' ) . innerHTML = notikumu. mērķis . vērtību ;
} )
Kā redzat, tekstlodziņā ievadītā vērtība ir veiksmīgi izgūta, izmantojot “ vērtību ” atribūts:
Tas viss attiecas uz JavaScript “event.target”.
Secinājums
' notikums.mērķis ” attiecas uz elementu, kas izraisīja/sāka notikumu. Ir daži rekvizīta “event.target” atribūti, kas sniedz informāciju par mērķa elementu. Piemēram, ' event.target.tagname ”, “ .vērtība ”, “ .id ”, “ .stils ', un tā tālāk. Šī ziņa ilustrē “event.target”, tā atribūtus un lietojumu JavaScript.