Suriin kung ang event.target ay may Tukoy na Klase Gamit ang JavaScript

I-istilo ang mga elemento gamit ang pag-istilo ng CSS. Upang gawin ito, lumikha ng isang klase ng CSS ' .div ” para sa lahat ng elemento ng div:

Gumawa ng ' .gitna ” class para sa pagtatakda ng mga elemento sa gitna ng pahina:

Ngayon, para sa pag-istilo, bawat div ay indibidwal na gumagawa ng CSS class para sa kanila. Para sa unang div, itakda ang kulay ng background ' pula ' nasa ' div1Style 'klase:

Para sa pangalawang div, itakda ang kulay ng background ' rosas na labanos ' gamit ang ' rgba(194, 54, 77) 'code sa ' div2Style 'klase:

Itakda ang kulay ng background ' kulay rosas ” ng ikatlong div sa pamamagitan ng paglikha ng “ div3Style 'klase:

Pagkatapos patakbuhin ang HTML code sa itaas, ang output ay magiging ganito:

Ngayon, sa isang JavaScript file o isang “ iskrip ” tag, gamitin ang ibinigay na code sa ibaba upang suriin kung ang event.target ay may partikular na klase o wala:

Sa snippet ng code sa itaas:

• Una, mag-attach ng event listener sa isang click event na hahawak sa bawat click sa DOM.
• Pagkatapos, suriin kung ang na-trigger na kaganapan ay may CSS class na “ gitna ' o hindi sa tulong ng ' classList.class() ” paraan.

Output

Ang GIF sa itaas ay nagpapakita na ang div1 ay naglalaman ng ' gitna 'klase tulad ng ipinapakita nito' totoo ”, habang ipinapakita ang div2 at div3 “ mali ” sa kahon ng alerto, na nangangahulugang hindi naglalaman ang mga ito ng “ gitna ” klase.

Paraan 2: Suriin kung ang event.target ay may Specific Class Gamit ang matches() Method

Isa pang paunang natukoy na pamamaraan ng JavaScript na tinatawag na ' mga tugma() ” ay maaaring gamitin upang suriin kung ang isang partikular na klase ay kabilang sa isang elemento o isang kaganapan. Ang ' pangalan ng klase ” ay ang tanging parameter na kailangan upang matukoy kung ang isang elemento o isang target na kaganapan ay may kasamang isang partikular na klase o hindi.

Syntax

Ang ibinigay na syntax sa ibaba ay ginagamit para sa matches() na paraan:

Sa syntax sa itaas,

• “ kaganapan.target ” ay isang na-trigger na kaganapan na susuriin kung naglalaman ito ng partikular na klase o hindi.
• Ang ' pangalan ng klase ” ay nagpapahiwatig ng pangalan ng klase ng CSS na bahagi ng na-trigger na kaganapan. Ang pamamaraan ng matches() ay kumukuha ng pangalan ng klase kasama ng isang tuldok (.) na nagsasaad ng salitang ' klase ”.

Ibalik ang halaga

Kung ang target na kaganapan ay may klase, ibabalik nito ang ' totoo 'iba pa,' mali ” ay ibinalik.

Halimbawa

Sa isang JavaScript file o isang script tag, gamitin ang mga linya ng code sa ibaba upang suriin kung ang event.target ay may partikular na klase o wala sa pamamagitan ng paggamit ng “ mga tugma() 'paraan:

Sa mga linya ng code sa itaas:

• Una, mag-attach ng event listener sa isang click event na hahawak sa bawat click sa DOM.
• Pagkatapos, suriin kung ang ' div3Style ” Ang klase ng CSS ay umiiral sa isang na-trigger na kaganapan gamit ang “ mga tugma() ” paraan.
• Kung ito ay naroroon, ang alert() ay nagpapakita ng isang mensahe na may ' totoo ', iba pa' mali ”.

Output

Ang GIF sa itaas ay nagpapakita na ang div3 lamang ang naglalaman ng ' div3Style 'klase tulad ng ipinapakita nito' totoo ”.

Konklusyon

Upang matukoy kung ang isang na-trigger na kaganapan ay may tinukoy na klase, gamitin ang JavaScript ' naglalaman ng() 'paraan o ang' mga tugma() ” paraan. Gayunpaman, ang contains() na pamamaraan ay isa sa mga pinakakapaki-pakinabang na diskarte na ginagamit upang matukoy ang klase ng isang elemento. Ang parehong mga pamamaraan ay bumalik ' totoo ' kung ang na-trigger na kaganapan ay may ibang klase ' mali ” ay ibinalik. Ipinaliwanag ng post na ito ang mga pamamaraan upang matukoy kung ang event.target ay may partikular na klase o hindi gumagamit ng JavaScript.