Este post irá ilustrar o “event.target” e seu uso em JavaScript.
O que é “event.target” em JavaScript?
O ' evento.alvo ” é uma propriedade/atributo de “ evento ” em JavaScript. Refere-se ao elemento que desencadeou o evento. Para acessar o atributo event.target, o evento do elemento deve ser ouvido. O ' addEventListener() ” é utilizado para ouvir o evento específico.
Sintaxe
Para usar a propriedade “event.target”, siga a sintaxe fornecida:
elemento. addEventListener ( '
console. registro ( evento. alvo )
} )
Na sintaxe dada,
- O ' addEventListener() ” é 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, vamos pegar o elemento que disparou o evento usando o “ evento.alvo ' propriedade.
Aqui, criaremos um botão atribuindo um id “ btn ” que é usado em JavaScript para acessar o botão:
< ID do botão = 'btn' > Clique aqui botão >
No arquivo JavaScript, primeiro, obteremos a referência do botão usando seu id atribuído com a ajuda do “ getElementById() ” método:
const botão = documento. getElementById ( 'btn' ) ;Anexe um ouvinte de evento com o botão. O ' clique ” é iniciado com o clique do botão e o objeto do evento é passado para o ouvinte do evento como um argumento. O ' evento.alvo ” é acessível a partir da função de ouvinte para obter uma referência ao elemento de botão que acionou o evento:
botão. addEventListener ( 'clique' , função ( evento ) {console. registro ( 'Evento alvo:' , evento. alvo ) ;
} ) ;
A saída mostra a referência do botão específico que é clicado:
Você pode obter mais informações e aplicar diferentes funcionalidades, como estilo, no evento de destino usando seus atributos.
Quais são os atributos de “event.target”?
Existem vários atributos da propriedade “event.target” que fornecem informações sobre o elemento de destino. Alguns dos atributos comuns do objeto event.target são os seguintes:
| Atributos event.target | Descrição |
| event.target.tagname | Usado para obter o “ nome ” da tag HTML do elemento de destino. |
| evento.alvo.valor | Utilize para recuperar o “ valor ” do elemento de destino. Este atributo é usado principalmente para elementos de entrada. |
| event.target.id | Por conseguir o “ eu ia ” do elemento de destino, use o atributo fornecido. |
| event.target.classList | A lista de ' Aulas ” contendo o elemento de destino é acessado por este atributo. |
| event.target.textContent | Usado para obter o “ conteúdo de texto ” do elemento de destino. |
| event.target.href | Este atributo recupera o “ href ” do elemento de destino, como links. |
| evento.destino.estilo | Para modificar o “ CSS ” do elemento de destino, use este atributo. |
Exemplo 1: alterar a cor de fundo do elemento de destino
No exemplo fornecido, vamos alterar a cor de fundo do elemento de destino usando o “ estilo ” atributo no “ clique ” evento:
const botão = documento. getElementById ( 'btn' ) ;botão. addEventListener ( 'clique' , função ( evento ) {
evento. alvo . estilo . cor de fundo = 'azul' ;
} ) ;
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 a tag
. Atribua IDs ao campo de entrada e tag
como “ takeInput ' e ' mostrar ”, respectivamente:
< tipo de entrada = 'texto' eu ia = 'takeInput' >< p id = 'mostrar' > p >
Obtenha a referência do campo de texto usando o “ getElementById() ” método:
foi inserido = documento. getElementById ( 'takeInput' ) ;Use o ' valor ” com o atributo “ evento.alvo ” para obter o valor do elemento de destino:
entrada. addEventListener ( 'entrada' , ( evento ) => {documento. getElementById ( 'mostrar' ) . HTML interno = evento. alvo . valor ;
} )
Como você pode ver, o valor digitado na caixa de texto foi recuperado com sucesso usando o botão “ valor ” atributo:
Isso foi tudo sobre o “event.target” em JavaScript.
Conclusão
O ' evento.alvo ” refere-se ao elemento que desencadeou/iniciou o evento. Existem alguns atributos da propriedade “event.target” que fornecem informações sobre o elemento de destino. Por exemplo, ' event.target.tagname ”, “ .valor ”, “ .eu ia ”, “ .estilo ', e assim por diante. Este post ilustrou o “event.target”, seus atributos e seu uso em JavaScript.