Cos'è l'evento.Target in JavaScript?

UN "evento"Si verifica quando lo stato di un oggetto cambia. Le attività dell'utente, come la pressione di qualsiasi tasto o il clic del mouse, possono causare eventi. Ci sono alcune proprietà di un evento in JavaScript che aiuta nelle funzioni di gestione degli eventi. IL "evento.bersaglio"È uno di questi che identifica quale elemento specifico ha attivato l'evento.

Questo post illustrerà l'evento ".Target "e il suo utilizzo in JavaScript.

Cos'è "Evento.Target "in JavaScript?

IL "evento.bersaglio"È una proprietà/attributo di"evento"In JavaScript. Si riferisce all'elemento che ha innescato l'evento. Per accedere all'evento.attributo target, l'evento dell'elemento deve essere ascoltato. IL "addEventListener ()"Il metodo viene utilizzato per ascoltare l'evento specifico.

Sintassi

Per l'uso dell'evento ".Proprietà target ", segui la sintassi data:

elemento.addEventListener ("", function (event)
console.registro (evento.bersaglio)
)

Nella sintassi data,

• IL "addEventListener ()"Il metodo viene utilizzato per l'aggiunta di un gestore di eventi per l'elemento specifico.
• ""Indica qualsiasi evento, come ad esempio"clic","Mouseover", e così via.

Esempio

Nell'esempio dato, otterremo l'elemento che ha innescato l'evento usando il "evento.bersaglio" proprietà.

Qui, creeremo un pulsante assegnando un ID "btn"Viene utilizzato in JavaScript per accedere al pulsante:

Clicca qui

Nel file JavaScript, in primo luogo, otterremo il riferimento del pulsante utilizzando l'ID assegnato con l'aiuto di "getElementById ()" metodo:

CONST BOCKS = Documento.getElementById ('btn');

Allega un ascoltatore di eventi con il pulsante. IL "clic"L'evento viene avviato sul clic del pulsante e l'oggetto evento viene passato all'ascoltatore di eventi come argomento. IL "evento.bersaglio"L'attributo è accessibile dalla funzione ascoltatore per ottenere un riferimento all'elemento pulsante che ha attivato l'evento:

pulsante.addEventListener ('click', function (event)
console.log ("evento target:", evento.bersaglio);
);

L'output mostra il riferimento del pulsante specifico che viene cliccato:

Puoi ottenere maggiori informazioni e applicare diverse funzionalità come lo styling sull'evento mirato utilizzando i suoi attributi.

Quali sono gli attributi di "evento.bersaglio"?

Esistono vari attributi dell'evento ".Proprietà target "che fornisce informazioni sull'elemento target. Pochi degli attributi comuni dell'evento.L'oggetto target è il seguente:

evento.attributi target	Descrizione
evento.bersaglio.Tagname	Utilizzato per ottenere il “nome"Del tag HTML dell'elemento target.
evento.bersaglio.valore	Utilizza per recuperare il "valore"Dell'elemento target. Questo attributo è utilizzato principalmente per gli elementi di input.
evento.bersaglio.id	Per ottenere il "id"Attributo dell'elemento target, utilizzare l'attributo dato.
evento.bersaglio.classlist	L'elenco di "classi"Contenente l'elemento target si accede a questo attributo.
evento.bersaglio.TextContent	Utilizzato per ottenere il “Contenuto di testo"Dell'elemento target.
evento.bersaglio.Href	Questo attributo recupera il "Href"Attributo dell'elemento target, come i collegamenti.
evento.bersaglio.stile	Per modificare il "CSS"Proprietà dell'elemento target, usa questo attributo.

Esempio 1: modificare il colore di sfondo dell'elemento target

Nell'esempio fornito, cambieremo il colore di sfondo dell'elemento target usando "stile"Attributo sul"clic"Evento:

CONST BOCKS = Documento.getElementById ('btn');
pulsante.addEventListener ('click', function (event)
evento.bersaglio.stile.backgroundColor = "blu";
);

Produzione

Esempio 2: ottenere il valore dell'elemento target

Crea un campo di testo di input e un'area per mostrare il testo usando

etichetta. Assegnare ID al campo di input e

Tag come "TakeInput" E "spettacolo"Rispettivamente:

Ottieni il riferimento del campo di testo usando "getElementById ()" metodo:

var input = document.getElementById ("TakeInput");

Usa il "valore"Attributo con il"evento.bersaglio"Per ottenere il valore dell'elemento mirato:

ingresso.addEventListener ("Input", (event) =>
documento.getElementById ("Show").InnerHtml = evento.bersaglio.valore;
)

Come puoi vedere che il valore immesso nella casella di testo è stato recuperato con successo usando "valore"Attributo:

Si trattava di "evento.Target "in JavaScript.

Conclusione

IL "evento.bersaglio"Si riferisce all'elemento che ha attivato/avviato l'evento. Ci sono alcuni attributi dell'evento ".Proprietà target "che fornisce informazioni sull'elemento target. Ad esempio, "evento.bersaglio.Tagname",".valore",".id",".stile", e così via. Questo post ha illustrato l'evento ".Target ", i suoi attributi e il suo utilizzo in JavaScript.