Questo post illustrerà 'event.target' e il suo utilizzo in JavaScript.
Cos'è 'event.target' in JavaScript?
IL ' evento.target ” è una proprietà/attributo di “ evento ' in JavaScript. Si riferisce all'elemento che ha attivato l'evento. Per accedere all'attributo event.target, l'evento dell'elemento deve essere ascoltato. IL ' addEventListener() Il metodo ” viene utilizzato per ascoltare l'evento specifico.
Sintassi
Per utilizzare la proprietà 'event.target', seguire la sintassi indicata:
elemento. addEventListener ( '
consolare. tronco d'albero ( evento. bersaglio )
} )
Nella sintassi data,
- IL ' addEventListener() Il metodo ” viene utilizzato per aggiungere un gestore di eventi per l'elemento specifico.
- “
” indica qualsiasi evento, come “ clic ”, “ passaggio del mouse ', e così via.
Esempio
Nell'esempio fornito, otterremo l'elemento che ha attivato l'evento utilizzando il ' evento.target ' proprietà.
Qui, creeremo un pulsante assegnando un id ' btn ” utilizzato in JavaScript per accedere al pulsante:
< ID pulsante = 'btn' > Clicca qui pulsante >
Nel file JavaScript, in primo luogo, otterremo il riferimento del pulsante utilizzando l'id assegnato con l'aiuto del ' getElementById() ' metodo:
cost pulsante = documento. getElementById ( 'btn' ) ;Allega un listener di eventi con il pulsante. IL ' clic L'evento ” viene avviato al clic del pulsante e l'oggetto evento viene passato al listener di eventi come argomento. IL ' evento.target L'attributo ” è accessibile dalla funzione listener per ottenere un riferimento all'elemento pulsante che ha attivato l'evento:
pulsante. addEventListener ( 'clic' , funzione ( evento ) {consolare. tronco d'albero ( 'Evento target:' , evento. bersaglio ) ;
} ) ;
L'output mostra il riferimento del pulsante specifico su cui è stato fatto clic:
Puoi ottenere maggiori informazioni e applicare diverse funzionalità come lo stile sull'evento mirato utilizzando i suoi attributi.
Quali sono gli attributi di 'event.target'?
Esistono vari attributi della proprietà “event.target” che forniscono informazioni sull'elemento target. Alcuni degli attributi comuni dell'oggetto event.target sono i seguenti:
| event.target Attributi | Descrizione |
| evento.target.tagname | Utilizzato per ottenere il ' nome ” del tag HTML dell'elemento di destinazione. |
| evento.obiettivo.valore | Utilizzare per recuperare il ' valore ” dell'elemento di destinazione. Questo attributo è utilizzato principalmente per gli elementi di input. |
| event.target.id | Per aver ottenuto il ' id ” dell'elemento di destinazione, utilizzare l'attributo specificato. |
| event.target.classList | L'elenco di “ classi ” contenente l'elemento di destinazione è accessibile da questo attributo. |
| event.target.textContent | Utilizzato per ottenere il ' contenuto testuale ” dell'elemento di destinazione. |
| evento.target.href | Questo attributo recupera il ' href ” dell'elemento di destinazione, ad esempio i collegamenti. |
| event.target.style | Per aver modificato il “ CSS ” proprietà dell'elemento di destinazione, utilizza questo attributo. |
Esempio 1: modificare il colore di sfondo dell'elemento di destinazione
Nell'esempio fornito, cambieremo il colore di sfondo dell'elemento di destinazione utilizzando il ' stile ” attributo sul “ clic evento:
cost pulsante = documento. getElementById ( 'btn' ) ;pulsante. addEventListener ( 'clic' , funzione ( evento ) {
evento. bersaglio . stile . colore di sfondo = 'blu' ;
} ) ;
Produzione
Esempio 2: ottenere il valore dell'elemento di destinazione
Crea un campo di testo di input e un'area per mostrare il testo utilizzando il tag
. Assegna ID al campo di input e tag
come ' takeInput ' E ' spettacolo ”, rispettivamente:
< tipo di ingresso = 'testo' id = 'prendereInput' >< p id = 'spettacolo' > P >
Ottenere il riferimento del campo di testo utilizzando il ' getElementById() ' metodo:
è stato immesso = documento. getElementById ( 'prendereInput' ) ;Usa il ' valore ” attributo con “ evento.target ” per ottenere il valore dell'elemento mirato:
ingresso. addEventListener ( 'ingresso' , ( evento ) => {documento. getElementById ( 'spettacolo' ) . innerHTML = evento. bersaglio . valore ;
} )
Come puoi vedere che il valore inserito nella casella di testo è stato recuperato con successo utilizzando il ' valore 'attributo:
Riguardava tutto 'event.target' in JavaScript.
Conclusione
IL ' evento.target ” si riferisce all'elemento che ha attivato/iniziato l'evento. Ci sono alcuni attributi della proprietà “event.target” che forniscono informazioni sull'elemento target. Ad esempio, ' evento.target.tagname ”, “ .valore ”, “ .id ”, “ .stile ', e così via. Questo post ha illustrato 'event.target', i suoi attributi e il suo utilizzo in JavaScript.