O que é evento.alvo em JavaScript?

Um "evento”Ocorre quando o estado de um objeto muda. As atividades do usuário, como pressionar qualquer tecla ou clicar no mouse, podem fazer com que os eventos ocorram. Existem algumas propriedades de um evento em JavaScript que ajuda nas funções de manipulação de eventos. O "evento.alvo”É um deles que identifica qual elemento específico desencadeou o evento.

Este post ilustrará o “evento.alvo ”e seu uso em JavaScript.

O que é “evento.alvo ”em JavaScript?

O "evento.alvo”É uma propriedade/atributo de“evento”Em JavaScript. Refere -se ao elemento que desencadeou o evento. Para acessar o evento.atributo alvo, o evento do elemento deve ser ouvido. O "addEventListener ()”O método é utilizado para ouvir o evento específico.

Sintaxe

Para usar o “evento.Target ”Propriedade, siga a sintaxe dada:

elemento.addEventListener ("", function (event)
console.log (evento.alvo)
)

Na sintaxe dada,

• O "addEventListener ()”O método é usado para adicionar um manipulador de eventos para o elemento específico.
• ““”Indica qualquer evento, como“clique","passe o rato por cima", e assim por diante.

Exemplo

No exemplo dado, obteremos o elemento que acionou o evento usando o “evento.alvo" propriedade.

Aqui, criaremos um botão atribuindo um ID “btn”Que é usado no JavaScript para acessar o botão:

Clique aqui

No arquivo JavaScript, primeiro, obteremos a referência do botão usando o ID atribuído com a ajuda do “getElementById ()”Método:

const Button = documento.getElementById ('btn');

Anexe um ouvinte de evento com o botão. O "clique”O evento é iniciado no clique do botão e o objeto de evento é passado para o ouvinte do evento como um argumento. O "evento.alvo”O atributo é acessível a partir da função do ouvinte para obter uma referência ao elemento do botão que acionou o evento:

botão.addEventListener ('click', function (event)
console.log ('Evento de destino:', evento.alvo);
);

A saída mostra a referência do botão específico que é clicado:

Você pode obter mais informações e aplicar funcionalidades diferentes, como o estilo no evento direcionado usando seus atributos.

Quais são os atributos do “evento.alvo"?

Existem vários atributos do “evento.Target ”Propriedade que fornece informações sobre o elemento de destino. Poucos dos atributos comuns do evento.O objeto de destino é o seguinte:

evento.atributos de destino	Descrição
evento.alvo.tagname	Usado para obter o “nome”Da tag html do elemento de destino.
evento.alvo.valor	Utilizar para recuperar o “valor”Do elemento alvo. Este atributo é usado principalmente para elementos de entrada.
evento.alvo.eu ia	Para conseguir o “eu ia”Atributo do elemento de destino, use o atributo fornecido.
evento.alvo.Lista de classe	A lista de "Aulas”Contendo o elemento de destino é acessado por este atributo.
evento.alvo.TextContent	Usado para obter o “conteúdo de texto”Do elemento alvo.
evento.alvo.Href	Este atributo recupera o “Href”Atributo do elemento de destino, como links.
evento.alvo.estilo	Para modificar o “CSS”Propriedade do elemento de destino, use este atributo.

Exemplo 1: Altere a cor de fundo do elemento de destino

No exemplo fornecido, mudaremos a cor de fundo do elemento de destino usando o “estiloAtributo no “cliqueEvento:

const Button = documento.getElementById ('btn');
botão.addEventListener ('click', function (event)
evento.alvo.estilo.AntecedentesColor = "Blue";
);

Saída

Exemplo 2: Obtenha o valor do elemento de destino

Crie um campo de texto de entrada e uma área para mostrar o texto usando

marcação. Atribuir IDs ao campo de entrada e

tag como "TakeInput" e "mostrar”, Respectivamente:

Obtenha a referência do campo de texto usando o “getElementById ()”Método:

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

Use o "valorAtributo "com o"evento.alvo”Para obter o valor do elemento direcionado:

entrada.addEventListener ("entrada", (evento) =>
documento.getElementById ("show").INNERHTML = Evento.alvo.valor;
)

Como você pode ver, o valor inserido na caixa de texto foi recuperado com sucesso usando o “valor”Atributo:

Isso foi tudo sobre o “evento.alvo ”em JavaScript.

Conclusão

O "evento.alvo”Refere -se ao elemento que desencadeou/iniciou o evento. Existem alguns atributos do “evento.Target ”Propriedade que fornece informações sobre o elemento de destino. Por exemplo, "evento.alvo.tagname",".valor",".eu ia",".estilo", e assim por diante. Este post ilustrou o “evento.alvo ”, seus atributos e seu uso em JavaScript.