Pārbaudiet, vai event.target ir noteikta klase, kas izmanto JavaScript

Parbaudiet Vai Event Target Ir Noteikta Klase Kas Izmanto Javascript



Dažkārt programmētājs var vēlēties pārbaudīt, vai elements, kas aktivizēja notikumu (event.target), atbilst viņam svarīgajam atlasītājam. Kā to izdarīt? JavaScript piedāvā dažas iepriekš definētas metodes, piemēram, ' satur () ' un ' atbilst() ” metodes, lai identificētu konkrēto atlasītāju mērķa notikumā.

Šajā ziņojumā tiks izskaidrotas metodes, kā noteikt, vai failam event.target ir noteikta klase vai netiek izmantots JavaScript.

Kā pārbaudīt, vai event.target ir noteikta klase, izmantojot JavaScript?

Lai noteiktu, vai failam event.target ir noteikta klase, izmantojiet šādas JavaScript iepriekš definētas metodes:







Apskatīsim, kā šīs metodes darbojas, lai noteiktu event.target klasi.



1. metode: pārbaudiet, vai failam event.target ir noteikta klase, kurā tiek izmantota metode include()

Lai noteiktu, vai elements pieder noteiktai klasei, izmantojiet ' satur () ' metode ' klases saraksts ” objekts. Metode satur() tiek izmantota, lai noteiktu, vai kolekcijā ir norādīts vienums. Tās rezultāti ' taisnība 'ja vienums ir klāt, pretējā gadījumā tas dod ' viltus ”. Tas ir visefektīvākais veids, kā noteikt elementa klasi.



Sintakse





Izpildiet tālāk norādīto sintaksi, lai noteiktu, vai failam event.target ir noteikta klase, vai neizmantojiet Content() metodi:

notikumu. mērķis . klases saraksts . satur ( 'klases nosaukums' )

Iepriekš minētajā sintaksē:



  • ' notikums.mērķis ” ir aktivizēts notikums, kas tiks pārbaudīts, vai tas satur konkrēto klasi vai nē.
  • ' klases nosaukums ” apzīmē tās CSS klases nosaukumu, kas ir daļa no aktivizētā notikuma.

Atdeves vērtība

Tas atgriežas' taisnība ” ja aktivizētajam notikumam ir norādītā klase; pretējā gadījumā tas atgriežas ' viltus ”.

Piemērs

Vispirms izveidojiet trīs ' div ” elementi HTML failā, izmantojot HTML

tags:

< div klasē = 'centrs div div1Style' id = 'div1' > 1

< div klasē = 'div div2Style' id = 'div2' > divi

< div klasē = 'div div3Style' id = 'div3' > 3

div >

div >

div >

Veidojiet elementus, izmantojot CSS stilu. Lai to izdarītu, izveidojiet CSS klasi ' .div ” visiem div elementiem:

. div {

polsterējums : 10 pikseļi ;

augstums : 100 pikseļi ;

platums : 100 pikseļi ;

starpība : 10 pikseļi ;

}

Izveidojiet ' .centrā ” klase elementu iestatīšanai lapas centrā:

. centrs {

starpība : auto ;

}

Tagad stilam katrs div atsevišķi izveido CSS klasi. Pirmajam div iestatiet fona krāsu ' sarkans ' iekš ' div1Style ” klase:

. div1Stils

{

fons - krāsa : sarkans ;

}

Otrajam dalījumam iestatiet fona krāsu ' redīsu rozā ' izmantojot ' rgba(194, 54, 77) ' kods sadaļā ' div2Style ” klase:

. div2Style

{

fons - krāsa : rgb ( 194 , 54 , 77 ) ;

}

Iestatiet fona krāsu ' rozā ' no trešā dalījuma, izveidojot ' div3Style ” klase:

. div3Style

{

fons - krāsa : rozā ;

}

Pēc iepriekš minētā HTML koda palaišanas izvade izskatīsies šādi:

Tagad JavaScript failā vai “ skripts ” tagu, izmantojiet tālāk norādīto kodu, lai pārbaudītu, vai event.target ir noteikta klase.

dokumentu. addEventListener ( 'klikšķis' , funkcijas rokturisNoklikšķiniet ( notikumu ) {

kur ir klase = notikumu. mērķis . klases saraksts . satur ( 'centrs' ) ;

brīdinājums ( 'Šajā divdaļā ir 'centra' klase: ' + hasClass ) ;

} ) ;

Iepriekš minētajā koda fragmentā:

  • Vispirms klikšķu notikumam pievienojiet notikumu uztvērēju, kas apstrādās katru klikšķi uz DOM.
  • Pēc tam pārbaudiet, vai aktivizētajam notikumam ir CSS klase ' centrs ” vai nē, izmantojot “ classList.class() ” metode.

Izvade

Iepriekš redzamais GIF parāda, ka div1 satur ' centrs 'klase, kā tas rāda' taisnība ”, kamēr div2 un div3 parāda “ viltus ” brīdinājuma lodziņā, kas nozīmē, ka tajos nav centrs ” klase.

2. metode: pārbaudiet, vai failam event.target ir noteikta klase, izmantojot metodi matches().

Vēl viena JavaScript iepriekš definēta metode ar nosaukumu ' atbilst() ” var izmantot, lai pārbaudītu, vai konkrēta klase pieder elementam vai notikumam. ' klases nosaukums ” ir vienīgais parametrs, kas nepieciešams, lai noteiktu, vai elements vai mērķa notikums ietver noteiktu klasi vai nē.

Sintakse

Mates() metodei tiek izmantota tālāk norādītā sintakse:

notikumu. mērķis . sērkociņi ( '.class-name' )

Iepriekš minētajā sintaksē

  • ' notikums.mērķis ” ir aktivizēts notikums, kas tiks pārbaudīts, vai tas satur konkrēto klasi vai nē.
  • ' klases nosaukums ” norāda tās CSS klases nosaukumu, kas ir aktivizētā notikuma daļa. Metode Mates() izmanto klases nosaukumu kopā ar punktu (.), kas apzīmē vārdu ' klasē ”.

Atdeves vērtība

Ja mērķa notikumam ir klase, tas atgriež ' taisnība 'cits', ' viltus ” tiek atgriezta.

Piemērs

JavaScript failā vai skripta tagā izmantojiet tālāk norādītās koda rindiņas, lai pārbaudītu, vai event.target ir noteikta klase, izmantojot ' atbilst() ” metode:

dokumentu. addEventListener ( 'klikšķis' , funkcijas rokturisNoklikšķiniet ( notikumu ) {

kur ir klase = notikumu. mērķis . sērkociņi ( '.div3Style' ) ;

brīdinājums ( 'Šī div klase atbilst klasei 'div3Style': + hasClass ) ;

} ) ;

Iepriekš minētajās koda rindās:

  • Vispirms klikšķu notikumam pievienojiet notikumu uztvērēju, kas apstrādās katru klikšķi uz DOM.
  • Pēc tam pārbaudiet, vai “ div3Style ' CSS klase pastāv aktivizētā notikumā, izmantojot ' atbilst() ” metode.
  • Ja tas ir, brīdinājums() parāda ziņojumu ar “ taisnība ”, cits” viltus ”.

Izvade

Iepriekš redzamais GIF parāda, ka tikai div3 satur ' div3Style 'klase, kā tas rāda' taisnība ”.

Secinājums

Lai noteiktu, vai aktivizētajam notikumam ir noteikta klase, izmantojiet JavaScript ' satur () 'metode vai ' atbilst() ” metode. Tomēr satur() metode ir viena no visnoderīgākajām pieejām, ko izmanto elementa klases noteikšanai. Abas metodes atgriežas ' taisnība 'ja aktivizētajam notikumam ir cita klase' viltus ” tiek atgriezta. Šajā ziņojumā ir izskaidrotas metodes, kā noteikt, vai failam event.target ir noteikta klase vai netiek izmantots JavaScript.