JavaScriptని ఉపయోగించి event.target నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో తనిఖీ చేయండి

Javascriptni Upayoginci Event Target Nirdista Taragatini Kaligi Undo Ledo Tanikhi Ceyandi



కొన్నిసార్లు, ప్రోగ్రామర్ ఈవెంట్‌ను ట్రిగ్గర్ చేసిన మూలకం (event.target) వారు శ్రద్ధ వహించే సెలెక్టర్‌తో సరిపోలుతుందో లేదో తనిఖీ చేయాలనుకోవచ్చు. దీన్ని ఎలా చేయాలి? జావాస్క్రిప్ట్ వంటి కొన్ని ముందే నిర్వచించబడిన పద్ధతులను అందిస్తుంది కలిగి () 'మరియు' మ్యాచ్‌లు() లక్ష్య ఈవెంట్‌లో నిర్దిష్ట ఎంపిక సాధనాన్ని గుర్తించే పద్ధతులు.

ఈ పోస్ట్ ఈవెంట్.టార్గెట్‌కు నిర్దిష్ట తరగతి ఉందా లేదా జావాస్క్రిప్ట్‌ని ఉపయోగించడం లేదని నిర్ధారించే పద్ధతులను వివరిస్తుంది.

JavaScriptని ఉపయోగించి event.target నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో తనిఖీ చేయడం ఎలా?

Event.target నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో తెలుసుకోవడానికి, క్రింది JavaScript ముందే నిర్వచించిన పద్ధతులను ఉపయోగించండి:





ఈవెంట్.టార్గెట్‌లో తరగతిని నిర్ణయించడానికి ఈ పద్ధతులు ఎలా పనిచేస్తాయో చూద్దాం.



విధానం 1: event.target ఒక నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో తనిఖీ చేయండి.

మూలకం నిర్దిష్ట తరగతికి చెందినదో కాదో నిర్ధారించడానికి, 'ని ఉపయోగించండి కలిగి () 'పద్ధతి' తరగతి జాబితా ” వస్తువు. సేకరణలో పేర్కొన్న అంశం ఉందో లేదో గుర్తించడానికి కలిగి() పద్ధతి ఉపయోగించబడుతుంది. దాని అవుట్‌పుట్‌లు' నిజం 'వస్తువు ఉన్నట్లయితే, అది ఇస్తుంది' తప్పుడు ”. మూలకం యొక్క తరగతిని నిర్ణయించడానికి ఇది అత్యంత ప్రభావవంతమైన మార్గం.



వాక్యనిర్మాణం



Event.target నిర్దిష్ట తరగతిని కలిగి ఉందా లేదా కలిగి ఉన్న() పద్ధతిని ఉపయోగించలేదా అని నిర్ధారించడానికి దిగువ ఇవ్వబడిన సింటాక్స్‌ను అనుసరించండి:

సంఘటన. లక్ష్యం . తరగతి జాబితా . కలిగి ఉంటుంది ( 'తరగతి పేరు' )

పై వాక్యనిర్మాణంలో:



  • ' ఈవెంట్.టార్గెట్ ” అనేది ట్రిగ్గర్ చేయబడిన ఈవెంట్, ఇది నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో తనిఖీ చేయబడుతుంది.
  • ది ' తరగతి-పేరు ” ట్రిగ్గర్ చేయబడిన ఈవెంట్‌లో భాగమైన CSS క్లాస్ పేరును గుర్తిస్తుంది.

రిటర్న్ విలువ

ఇది తిరిగి వస్తుంది' నిజం 'ప్రేరేపిత ఈవెంట్ పేర్కొన్న తరగతిని కలిగి ఉంటే; లేకపోతే, అది తిరిగి వస్తుంది ' తప్పుడు ”.

ఉదాహరణ

మొదట, మూడు 'ని సృష్టించండి div HTMLని ఉపయోగించి HTML ఫైల్‌లోని మూలకాలు

ట్యాగ్:

< div తరగతి = 'సెంటర్ డివిడివి1 స్టైల్' id = 'div1' > 1

< div తరగతి = 'div div2Style' id = 'div2' > రెండు

< div తరగతి = 'div div3Style' id = 'div3' > 3

div >

div >

div >

CSS స్టైలింగ్‌ని ఉపయోగించి మూలకాలను స్టైల్ చేయండి. అలా చేయడానికి, ఒక CSS తరగతిని సృష్టించండి ' .div 'అన్ని DIV మూలకాల కోసం:

. div {

పాడింగ్ : 10px ;

ఎత్తు : 100px ;

వెడల్పు : 100px ;

మార్జిన్ : 10px ;

}

ఒక 'ని సృష్టించండి .కేంద్రం ” పేజీ మధ్యలో మూలకాలను అమర్చడానికి తరగతి:

. కేంద్రం {

మార్జిన్ : దానంతట అదే ;

}

ఇప్పుడు, స్టైలింగ్ కోసం, ప్రతి div వారి కోసం వ్యక్తిగతంగా CSS తరగతిని సృష్టిస్తుంది. మొదటి div కోసం, నేపథ్య రంగును సెట్ చేయండి ' ఎరుపు ' లో ' div1Style 'తరగతి:

. div1Style

{

నేపథ్య - రంగు : ఎరుపు ;

}

రెండవ విభజన కోసం, నేపథ్య రంగును సెట్ చేయండి ' ముల్లంగి గులాబీ 'ఉపయోగించి' rgba(194, 54, 77) ''లో కోడ్ div2Style 'తరగతి:

. div2Style

{

నేపథ్య - రంగు : rgb ( 194 , 54 , 77 ) ;

}

నేపథ్య రంగును సెట్ చేయండి ' గులాబీ రంగు 'ని సృష్టించడం ద్వారా మూడవ డివివి' div3Style 'తరగతి:

. div3Style

{

నేపథ్య - రంగు : గులాబీ రంగు ;

}

పై HTML కోడ్‌ని అమలు చేసిన తర్వాత, అవుట్‌పుట్ ఇలా కనిపిస్తుంది:

ఇప్పుడు, జావాస్క్రిప్ట్ ఫైల్‌లో లేదా “ స్క్రిప్ట్ ” ట్యాగ్, ఈవెంట్.టార్గెట్‌కు నిర్దిష్ట తరగతి ఉందో లేదో తనిఖీ చేయడానికి దిగువ అందించిన కోడ్‌ని ఉపయోగించండి:

పత్రం. addEventListener ( 'క్లిక్' , ఫంక్షన్ handleClick ( సంఘటన ) {

ఎక్కడ ఉంది క్లాస్ = సంఘటన. లక్ష్యం . తరగతి జాబితా . కలిగి ఉంటుంది ( 'కేంద్రం' ) ;

అప్రమత్తం ( 'ఈ డివిడిలో 'సెంటర్' క్లాస్ ఉంది: ' + తరగతి ఉంది ) ;

} ) ;

పై కోడ్ స్నిప్పెట్‌లో:

  • ముందుగా, DOMపై ప్రతి క్లిక్‌ని నిర్వహించే ఒక క్లిక్ ఈవెంట్‌లో ఈవెంట్ లిజనర్‌ను అటాచ్ చేయండి.
  • ఆపై, ట్రిగ్గర్ చేయబడిన ఈవెంట్‌లో CSS క్లాస్ ఉందో లేదో తనిఖీ చేయండి ' కేంద్రం 'లేదా' సహాయంతో కాదు classList.class() ” పద్ధతి.

అవుట్‌పుట్

పై GIF div1లో “ కేంద్రం 'తరగతి చూపిన విధంగా' నిజం ', div2 మరియు div3 డిస్ప్లే అయితే' తప్పుడు ”అలర్ట్ బాక్స్‌లో, అంటే అవి “ని కలిగి ఉండవు కేంద్రం ” తరగతి.

విధానం 2: ఈవెంట్.టార్గెట్‌కు మ్యాచ్‌లు() పద్ధతిని ఉపయోగించి నిర్దిష్ట తరగతి ఉందో లేదో తనిఖీ చేయండి

మరొక జావాస్క్రిప్ట్ ముందే నిర్వచించిన పద్ధతి ' మ్యాచ్‌లు() ” నిర్దిష్ట తరగతి ఒక మూలకం లేదా ఈవెంట్‌కు చెందినదా అని తనిఖీ చేయడానికి ఉపయోగించవచ్చు. ది ' తరగతి-పేరు ” అనేది ఒక మూలకం లేదా లక్ష్య ఈవెంట్ నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో నిర్ధారించడానికి అవసరమైన ఏకైక పరామితి.

వాక్యనిర్మాణం

క్రింద ఇవ్వబడిన సింటాక్స్ మ్యాచ్‌లు() పద్ధతి కోసం ఉపయోగించబడుతుంది:

సంఘటన. లక్ష్యం . మ్యాచ్‌లు ( '.తరగతి-పేరు' )

పై వాక్యనిర్మాణంలో,

  • ' ఈవెంట్.టార్గెట్ ” అనేది ట్రిగ్గర్ చేయబడిన ఈవెంట్, ఇది నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో తనిఖీ చేయబడుతుంది.
  • ది ' తరగతి-పేరు ” అనేది ట్రిగ్గర్ చేయబడిన ఈవెంట్‌లో భాగమైన CSS తరగతి పేరును సూచిస్తుంది. మ్యాచ్‌లు() పద్ధతి '' అనే పదాన్ని సూచించే చుక్క (.)తో పాటు తరగతి పేరును తీసుకుంటుంది. తరగతి ”.

రిటర్న్ విలువ

లక్ష్య ఈవెంట్‌కు తరగతి ఉంటే, అది తిరిగి వస్తుంది “ నిజం ' లేకపోతే, ' తప్పుడు ” తిరిగి వస్తుంది.

ఉదాహరణ

జావాస్క్రిప్ట్ ఫైల్ లేదా స్క్రిప్ట్ ట్యాగ్‌లో, ఈవెంట్.టార్గెట్‌కు నిర్దిష్ట తరగతి ఉందో లేదో తనిఖీ చేయడానికి క్రింది కోడ్ లైన్‌లను ఉపయోగించండి “ మ్యాచ్‌లు() 'పద్ధతి:

పత్రం. addEventListener ( 'క్లిక్' , ఫంక్షన్ handleClick ( సంఘటన ) {

ఎక్కడ ఉంది క్లాస్ = సంఘటన. లక్ష్యం . మ్యాచ్‌లు ( '.div3Style' ) ;

అప్రమత్తం ( 'ఈ div యొక్క తరగతి 'div3Style' తరగతికి సరిపోలుతుంది: ' + తరగతి ఉంది ) ;

} ) ;

పై కోడ్ లైన్లలో:

  • ముందుగా, DOMపై ప్రతి క్లిక్‌ని నిర్వహించే ఒక క్లిక్ ఈవెంట్‌లో ఈవెంట్ లిజనర్‌ను అటాచ్ చేయండి.
  • అప్పుడు, ' div3Style ' CSS క్లాస్ 'ని ఉపయోగించి ప్రేరేపించబడిన ఈవెంట్‌లో ఉంది మ్యాచ్‌లు() ” పద్ధతి.
  • అది ఉన్నట్లయితే, హెచ్చరిక() 'తో కూడిన సందేశాన్ని చూపుతుంది. నిజం ', లేకపోతే ' తప్పుడు ”.

అవుట్‌పుట్

పై GIF కేవలం div3 మాత్రమే కలిగి ఉందని చూపిస్తుంది “ div3Style 'తరగతి చూపిన విధంగా' నిజం ”.

ముగింపు

ట్రిగ్గర్ చేయబడిన ఈవెంట్‌కు నిర్దిష్ట తరగతి ఉందో లేదో తెలుసుకోవడానికి, జావాస్క్రిప్ట్‌ని ఉపయోగించండి ' కలిగి () 'పద్ధతి లేదా' మ్యాచ్‌లు() ” పద్ధతి. అయినప్పటికీ, మూలకం యొక్క తరగతిని నిర్ణయించడానికి ఉపయోగించే అత్యంత ఉపయోగకరమైన విధానాలలో కలిగి() పద్ధతి ఒకటి. రెండు పద్ధతులు తిరిగి వస్తాయి ' నిజం 'ప్రేరేపిత ఈవెంట్‌కు వేరే తరగతి ఉంటే' తప్పుడు ” తిరిగి వస్తుంది. ఈ పోస్ట్ ఈవెంట్.టార్గెట్‌కు నిర్దిష్ట తరగతి ఉందా లేదా జావాస్క్రిప్ట్‌ని ఉపయోగించడం లేదని నిర్ధారించే పద్ధతులను వివరించింది.

ఇతర

వర్గం

ప్రముఖ పోస్ట్లు

జావాస్క్రిప్ట్‌లో పట్టికను ఎలా ఫిల్టర్ చేయాలి

మేక్‌ఫైల్‌లో వైల్డ్‌కార్డ్‌లు మరియు ఫోర్చ్

నేను జిట్ పుష్‌ను సరిగ్గా ఎలా బలవంతం చేయాలి?

జావాస్క్రిప్ట్ యొక్క RegExpలో W మెటాక్యారెక్టర్ ఏమి చేస్తుంది

జావాస్క్రిప్ట్ ఉపయోగించి ఒక మూలకానికి స్క్రోల్ చేయడం ఎలా

స్విచింగ్ కోసం ఎలక్ట్రికల్ రిలేలు మరియు సాలిడ్-స్టేట్ రిలేలను ఎలా అర్థం చేసుకోవాలి

మీ టెర్మినల్ ఉత్పాదకతను పెంచడం: ఓహ్ మై Zsh ప్లగిన్‌లు మీకు అవసరం

సేవా నియంత్రణ విధానాన్ని ఎలా సృష్టించాలి?

C++లో డేటా స్ట్రక్చర్ అంటే ఏమిటి

ఎలాస్టిక్ సెర్చ్ అగ్రిగేషన్ అంటే ఏమిటి?

ADB కమాండ్ కనుగొనబడలేదు

డెప్త్ స్ట్రైడర్ Minecraft

systemctl కమాండ్‌తో బూట్ లక్ష్యాలను ఎలా మార్చాలి

డాకర్‌ని ఉపయోగించి జెంకిన్స్ సర్వర్‌ని సెటప్ చేయండి

C#లో యాదృచ్ఛిక పూర్ణాంకాలను ఎలా రూపొందించాలి

CSSలో టేబుల్-కాలమ్ గ్రూప్ మరియు టేబుల్-రో గ్రూప్ యొక్క ఉపయోగం ఏమిటి

C++లో స్టాటిక్ గ్లోబల్ వేరియబుల్స్

కమాండ్ లైన్ ఉపయోగించి CentOS 8ని రీబూట్ చేయడం ఎలా?

SQL ఆరోహణ క్రమం

కొత్త జూపిటర్ హబ్ వినియోగదారు ఖాతాను ఎలా సృష్టించాలి