Verifique se o evento.Target tem uma classe específica usando JavaScript

Às vezes, o programador pode querer verificar se o elemento que desencadeou o evento (o evento.alvo) corresponde ao seletor com o qual se preocupam. Como fazer isso? JavaScript oferece alguns métodos predefinidos, como “contém ()" e "partidas()”Métodos para identificar o seletor específico em um evento de destino.

Este post explicará os métodos para determinar se o evento.Target tem uma classe específica ou não usando JavaScript.

Como verificar se o evento.Target tem uma classe específica usando JavaScript?

Para determinar se o evento.O Target tem uma classe específica, use os seguintes métodos predefinidos de JavaScript:

• Método contém ()
• Método Matches ()

Vamos ver como esses métodos funcionam para determinar a classe em um evento.alvo.

Método 1: Verifique se o evento.Target possui uma classe específica usando o método contém ()

Para determinar se um elemento pertence a uma classe específica, use o “contém ()”Método do“Lista de classe”Objeto. O método contains () é usado para identificar se um item especificado está presente na coleção. Suas saídas “verdadeiro“Se o item estiver presente, caso contrário, ele dá“falso”. É a maneira mais eficiente de determinar a classe de um elemento.

Sintaxe

Siga a sintaxe abaixo para determinar se o evento.Target tem uma classe específica ou não usando o método contains ():

evento.alvo.Lista de classe.Contém ('Class-Name')

Na sintaxe acima:

• ““evento.alvo”É um evento acionado que será verificado se contém a classe específica ou não.
• O "nome da classe”Identifica o nome da classe CSS que faz parte do evento acionado.

Valor de retorno

Ele retorna “verdadeiro"Se o evento acionado tiver a classe especificada; Caso contrário, ele retorna “falso”.

Exemplo

Primeiro, crie três “div”Elementos em um arquivo HTML usando o HTML marcação:

1
2
3

Estilize os elementos usando o estilo CSS. Para fazer isso, crie uma classe CSS “.div”Para todos os elementos da div:

.div
preenchimento: 10px;
Altura: 100px;
Largura: 100px;
margem: 10px;

Criar uma ".Centro”Classe para definir os elementos no centro da página:

.Centro
margem: automático;

Agora, para modelar, toda divide individualmente cria uma classe CSS para eles. Para a primeira div, defina a cor de fundo “vermelho" no "Div1style" aula:

.Div1style

cor de fundo: vermelho;

Para a segunda div, defina a cor de fundo “rosa rosa”Usando o“RGBA (194, 54, 77)"Código no"Div2style" aula:

.Div2style

Background-Color: RGB (194, 54, 77);

Defina a cor de fundo “rosa"Do terceiro div criando o"Div3style" aula:

.Div3style

Background-Color: rosa;

Depois de executar o código HTML acima, a saída ficará assim:

Agora, em um arquivo JavaScript ou “roteiro”Tag, use o código fornecido abaixo para verificar se o evento.Target tem uma aula específica ou não:

documento.addEventListener ('clique', função handleclick (evento)
var hasclass = evento.alvo.Lista de classe.contém ('centro');
Alert ("Esta divide contém classe 'Center':" + hasclass);
);

No trecho de código acima:

• Primeiro, anexe um ouvinte de evento em um evento de clique que lidará com todos os cliques em DOM.
• Em seguida, verifique se o evento desencadeado tem a classe CSS “Centro”Ou não com a ajuda do“Lista de classe.aula()”Método.

Saída

O GIF acima mostra que o div1 contém o “Centro”Classe como mostra“verdadeiro”, Enquanto Div2 e Div3 exibem“falso”Na caixa de alerta, o que significa que eles não contêm o“Centro" aula.

Método 2: Verifique se o evento.Target tem uma classe específica usando o método Matches ()

Outro método predefinido JavaScript chamado “partidas()”Pode ser usado para verificar se uma classe específica pertence a um elemento ou um evento. O "nome da classe”É o único parâmetro necessário para determinar se um elemento ou um evento de destino inclui uma determinada classe ou não.

Sintaxe

A sintaxe abaixo é utilizada para o método Matches ():

evento.alvo.partidas('.nome da classe')

Na sintaxe acima,

• ““evento.alvo”É um evento acionado que será verificado se contém a classe específica ou não.
• O "nome da classe”Indica o nome da classe CSS que faz parte do evento desencadeado. O método Matches () leva o nome da aula junto com um ponto (.) que denota a palavra “aula”.

Valor de retorno

Se o evento de destino tiver uma aula, ele retorna “verdadeiro" outro, "falso”É devolvido.

Exemplo

Em um arquivo javascript ou em uma tag de script, use as linhas de código abaixo para verificar se o evento.Target tem uma aula específica ou não usando o “partidas()”Método:

documento.addEventListener ('clique', função handleclick (evento)
var hasclass = evento.alvo.partidas('.div3style ');
alerta ("A classe desta div corresponde à classe 'div3style':" + hasclass);
);

Nas linhas acima do código:

• Primeiro, anexe um ouvinte de evento em um evento de clique que lidará com todos os cliques em DOM.
• Então, verifique se o “Div3style”Classe CSS existe em um evento acionado usando o“partidas()”Método.
• Se estiver presente, o alert () mostra uma mensagem com “verdadeiro", outro "falso”.

Saída

O GIF acima mostra que apenas o div3 contém o “Div3style”Classe como mostra“verdadeiro”.

Conclusão

Para determinar se um evento desencadeado possui uma classe especificada, use o JavaScript “contém ()”Método ou o“partidas()”Método. No entanto, o método contains () é uma das abordagens mais úteis usadas para determinar a classe de um elemento. Ambos os métodos retornam “verdadeiro"Se o evento desencadeado tiver uma classe mais"falso”É devolvido. Este post explicou os métodos para determinar se o evento.Target tem uma classe específica ou não usando JavaScript.