Compruebe si el evento.El objetivo tiene una clase específica usando JavaScript

A veces, el programador puede querer verificar si el elemento que activó el evento (el evento.objetivo) coincide con el selector que les importa. Como hacer esto? JavaScript ofrece algunos métodos predefinidos como "contiene()" y "partidos()"Métodos para identificar el selector específico en un evento objetivo.

Esta publicación explicará los métodos para determinar si el evento.El objetivo tiene una clase en particular o no usa JavaScript.

Cómo verificar si el evento.El objetivo tiene una clase específica usando JavaScript?

Para determinar si el evento.El objetivo tiene una clase en particular, use los siguientes métodos predefinidos de JavaScript:

• Contiene () método
• método de coincidencias ()

Veamos cómo funcionan estos métodos para determinar la clase en un evento.objetivo.

Método 1: Compruebe si el evento.El objetivo tiene una clase específica usando el método Contiene ()

Para determinar si un elemento pertenece a una clase específica, use el "contiene()"Método del"Lista de clase" objeto. El método Contiene () se utiliza para identificar si un elemento especificado está presente en la colección. Sus salidas "verdadero"Si el artículo está presente, de lo contrario, da"FALSO". Es la forma más eficiente para determinar la clase de un elemento.

Sintaxis

Siga la sintaxis dividida a continuación para determinar si el evento.El objetivo tiene una clase específica o no utilizando el método Contiene ():

evento.objetivo.Lista de clase.Contiene ('Nombre de clase')

En la sintaxis anterior:

• "evento.objetivo"Es un evento activado que se verificará si contiene la clase específica o no.
• El "nombre de la clase"Identifica el nombre de la clase CSS que forma parte del evento activado.

Valor de retorno

Vuelve "verdadero"Si el evento activado tiene la clase especificada; De lo contrario, regresa "FALSO".

Ejemplo

Primero, crea tres "divElementos en un archivo HTML utilizando el HTML etiqueta:

1
2
3

Estilizar los elementos con estilo CSS. Para hacerlo, cree una clase CSS ".div"Para todos los elementos Div:

.div
relleno: 10px;
Altura: 100px;
Ancho: 100px;
margen: 10px;

Crear un ".centroClase para configurar los elementos en el centro de la página:

.centro
margen: auto;

Ahora, para el estilo, cada div comunita individualmente una clase CSS para ellos. Para el primer div, establece el color de fondo "rojo" en el "Estilo Div1" clase:

.Estilo Div1

Color de fondo: rojo;

Para el segundo div, establece el color de fondo "rábano rosa" utilizando el "RGBA (194, 54, 77)"Código en el"Estilo Div2" clase:

.Estilo Div2

Color de fondo: RGB (194, 54, 77);

Establezca el color de fondo "rosa"Del tercer div creando el"Estilo Div3" clase:

.Estilo Div3

Color de fondo: rosa;

Después de ejecutar el código HTML anterior, la salida se verá así:

Ahora, en un archivo JavaScript o en un "guion"Etiqueta, use el código proporcionado a continuación para verificar si el evento.El objetivo tiene una clase específica o no:

documento.addEventListener ('hacer clic', function handLecLick (evento)
var Hasclass = evento.objetivo.Lista de clase.contiene ('centro');
alerta ("Este div contiene clase 'Center':" + HaClass);
);

En el fragmento de código anterior:

• Primero, adjunte un oyente de eventos en un evento de clic que manejará cada clic en DOM.
• Luego, verifique si el evento activado tiene la clase CSS "centro"O no con la ayuda del"Lista de clase.clase()" método.

Producción

El GIF anterior muestra que Div1 contiene el "centro"Clase como muestra"verdadero", Mientras Div2 y Div3 muestran"FALSO"En el cuadro de alerta, lo que significa que no contienen el"centro" clase.

Método 2: Verifique si el evento.El objetivo tiene una clase específica usando Matches () Método

Otro método predefinido de JavaScript llamado "partidos()"Se puede usar para verificar si una clase específica pertenece a un elemento o un evento. El "nombre de la clase"¿Es el único parámetro necesario para determinar si un elemento o un evento objetivo incluye una determinada clase o no.

Sintaxis

La sintaxis dada a continuación se utiliza para el método de coincidencias ():

evento.objetivo.partidos('.nombre de la clase')

En la sintaxis anterior,

• "evento.objetivo"Es un evento activado que se verificará si contiene la clase específica o no.
• El "nombre de la clase"Indica el nombre de la clase CSS que es parte del evento activado. El método coincidentes () toma el nombre de la clase junto con un punto (.) que denota la palabra "clase".

Valor de retorno

Si el evento objetivo tiene una clase, regresa "verdadero" demás, "FALSO" es regresado.

Ejemplo

En un archivo JavaScript o una etiqueta de script, use las líneas de código a continuación para verificar si el evento.El objetivo tiene una clase específica o no mediante el uso del "partidos()" método:

documento.addEventListener ('hacer clic', function handLecLick (evento)
var Hasclass = evento.objetivo.partidos('.Div3Style ');
alerta ("La clase de esta Div coincide con la clase 'Div3Style':" + Hasclass);
);

En las líneas de código anteriores:

• Primero, adjunte un oyente de eventos en un evento de clic que manejará cada clic en DOM.
• Luego, verifique si el "Estilo Div3"La clase CSS existe en un evento activado utilizando el"partidos()" método.
• Si está presente, la alerta () muestra un mensaje con "verdadero", demás "FALSO".

Producción

El GIF anterior muestra que solo Div3 contiene el "Estilo Div3"Clase como muestra"verdadero".

Conclusión

Para determinar si un evento activado tiene una clase especificada, use el JavaScript "contiene()"Método o el"partidos()" método. Sin embargo, el método Contiene () es uno de los enfoques más útiles utilizados para determinar la clase de un elemento. Ambos métodos regresan "verdadero"Si el evento activado tiene una clase más"FALSO" es regresado. Esta publicación explicó los métodos para determinar si el evento.El objetivo tiene una clase en particular o no usa JavaScript.