ఈ పోస్ట్ జావాస్క్రిప్ట్‌లో “event.target” మరియు దాని వినియోగాన్ని వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో “event.target” అంటే ఏమిటి?
ది ' ఈవెంట్.టార్గెట్ ” అనేది ఆస్తి/లక్షణం” సంఘటన ” జావాస్క్రిప్ట్‌లో. ఇది ఈవెంట్‌ను ప్రేరేపించిన మూలకాన్ని సూచిస్తుంది. ఈవెంట్.టార్గెట్ అట్రిబ్యూట్‌ని యాక్సెస్ చేయడానికి, ఎలిమెంట్ ఈవెంట్‌ని తప్పనిసరిగా వినాలి. ది ' addEventListener() 'నిర్దిష్ట ఈవెంట్‌ను వినడానికి పద్ధతి ఉపయోగించబడుతుంది.
వాక్యనిర్మాణం
“event.target” ప్రాపర్టీని ఉపయోగించడం కోసం, ఇచ్చిన సింటాక్స్‌ని అనుసరించండి:
మూలకం. addEventListener ( '<ఈవెంట్>' , ఫంక్షన్ ( సంఘటన ) {
కన్సోల్. లాగ్ ( సంఘటన. లక్ష్యం )
} )
ఇచ్చిన వాక్యనిర్మాణంలో,
- ది ' addEventListener() ” అనే పద్ధతి నిర్దిష్ట మూలకం కోసం ఈవెంట్ హ్యాండ్లర్‌ని జోడించడానికి ఉపయోగించబడుతుంది.
- ' <ఈవెంట్> ” వంటి ఏదైనా సంఘటనను సూచిస్తుంది క్లిక్ చేయండి ',' mouseover ”, మరియు మొదలైనవి.
ఉదాహరణ
ఇచ్చిన ఉదాహరణలో, ''ని ఉపయోగించి ఈవెంట్‌ని ప్రేరేపించిన మూలకాన్ని మేము పొందుతాము. ఈవెంట్.టార్గెట్ ”ఆస్తి.
ఇక్కడ, మేము ఐడిని కేటాయించడం ద్వారా బటన్‌ను సృష్టిస్తాము “ btn ” బటన్‌ను యాక్సెస్ చేయడానికి జావాస్క్రిప్ట్‌లో ఉపయోగించబడుతుంది:
< బటన్ id = 'btn' > ఇక్కడ నొక్కండి బటన్ >
జావాస్క్రిప్ట్ ఫైల్‌లో, ముందుగా, '' సహాయంతో కేటాయించిన ఐడిని ఉపయోగించి బటన్ యొక్క సూచనను పొందుతాము. getElementById() 'పద్ధతి:
స్థిరంగా బటన్ = పత్రం. getElementById ( 'btn' ) ;బటన్‌తో ఈవెంట్ లిజనర్‌ని అటాచ్ చేయండి. ది ' క్లిక్ చేయండి ” ఈవెంట్ బటన్ క్లిక్‌పై ప్రారంభించబడుతుంది మరియు ఈవెంట్ ఆబ్జెక్ట్ ఈవెంట్ వినేవారికి ఆర్గ్యుమెంట్‌గా పంపబడుతుంది. ది ' ఈవెంట్.టార్గెట్ ఈవెంట్‌ను ట్రిగ్గర్ చేసిన బటన్ ఎలిమెంట్‌కు సూచనను పొందడానికి లిజనర్ ఫంక్షన్ నుండి 'లక్షణాన్ని యాక్సెస్ చేయవచ్చు:
బటన్. addEventListener ( 'క్లిక్' , ఫంక్షన్ ( సంఘటన ) {కన్సోల్. లాగ్ ( 'టార్గెట్ ఈవెంట్:' , ఈవెంట్. లక్ష్యం ) ;
} ) ;
అవుట్‌పుట్ క్లిక్ చేయబడిన నిర్దిష్ట బటన్ యొక్క సూచనను చూపుతుంది:
మీరు మరింత సమాచారాన్ని పొందవచ్చు మరియు దాని లక్షణాలను ఉపయోగించి లక్షిత ఈవెంట్‌పై స్టైలింగ్ వంటి విభిన్న కార్యాచరణలను వర్తింపజేయవచ్చు.
'event.target' యొక్క గుణాలు ఏమిటి?
లక్ష్య మూలకం గురించి సమాచారాన్ని అందించే 'event.target' ఆస్తి యొక్క వివిధ లక్షణాలు ఉన్నాయి. ఈవెంట్.టార్గెట్ ఆబ్జెక్ట్ యొక్క కొన్ని సాధారణ గుణాలు క్రింది విధంగా ఉన్నాయి:
| ఈవెంట్.టార్గెట్ గుణాలు | వివరణ |
| ఈవెంట్.టార్గెట్.ట్యాగ్‌నేమ్ | 'ని పొందడానికి ఉపయోగించబడుతుంది పేరు లక్ష్యం మూలకం యొక్క HTML ట్యాగ్ యొక్క ”. |
| ఈవెంట్.టార్గెట్.విలువ | 'ని తిరిగి పొందడం కోసం ఉపయోగించండి విలువ లక్ష్యం మూలకం యొక్క ”. ఈ లక్షణం ఎక్కువగా ఇన్పుట్ మూలకాల కోసం ఉపయోగించబడుతుంది. |
| event.target.id | పొందడం కోసం ' id ” లక్ష్య మూలకం యొక్క లక్షణం, ఇచ్చిన లక్షణాన్ని ఉపయోగించండి. |
| event.target.classList | జాబితా ' తరగతులు లక్ష్యం మూలకాన్ని కలిగి ఉన్న ” ఈ లక్షణం ద్వారా యాక్సెస్ చేయబడుతుంది. |
| ఈవెంట్.టార్గెట్.టెక్స్ట్ కంటెంట్ | 'ని పొందడానికి ఉపయోగించబడుతుంది వచన కంటెంట్ లక్ష్యం మూలకం యొక్క ”. |
| event.target.href | ఈ లక్షణం 'ని తిరిగి పొందుతుంది href ” లింక్‌ల వంటి లక్ష్య మూలకం యొక్క లక్షణం. |
| ఈవెంట్.టార్గెట్.స్టైల్ | సవరించడం కోసం ' CSS ”లక్ష్య మూలకం యొక్క లక్షణం, ఈ లక్షణాన్ని ఉపయోగించండి. |
ఉదాహరణ 1: లక్ష్య మూలకం యొక్క నేపథ్య రంగును మార్చండి
అందించిన ఉదాహరణలో, మేము లక్ష్య మూలకం యొక్క నేపథ్య రంగును “ని ఉపయోగించి మారుస్తాము. శైలి 'పై' లక్షణం క్లిక్ చేయండి ”సంఘటన:
స్థిరంగా బటన్ = పత్రం. getElementById ( 'btn' ) ;బటన్. addEventListener ( 'క్లిక్' , ఫంక్షన్ ( సంఘటన ) {
సంఘటన. లక్ష్యం . శైలి . నేపథ్య రంగు = 'నీలం' ;
} ) ;
అవుట్‌పుట్
ఉదాహరణ 2: లక్ష్య మూలకం యొక్క విలువను పొందండి
ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ను మరియు
ట్యాగ్‌ని ఉపయోగించి టెక్స్ట్‌ని చూపించడానికి ఒక ప్రాంతాన్ని సృష్టించండి. ఇన్పుట్ ఫీల్డ్‌కు idలను కేటాయించి,
“” అని ట్యాగ్ చేయండి ఇన్పుట్ తీసుకోండి 'మరియు' చూపించు ”, వరుసగా:
< ఇన్పుట్ రకం = 'వచనం' id = 'టేక్ ఇన్పుట్' >< p id = 'ప్రదర్శన' > p >
'ని ఉపయోగించి టెక్స్ట్ ఫీల్డ్ యొక్క సూచనను పొందండి getElementById() 'పద్ధతి:
ఇన్పుట్ చేయబడింది = పత్రం. getElementById ( 'టేక్ ఇన్పుట్' ) ;ఉపయోగించడానికి ' విలువ 'తో లక్షణం' ఈవెంట్.టార్గెట్ లక్ష్యం చేయబడిన మూలకం యొక్క విలువను పొందడానికి:
ఇన్పుట్. addEventListener ( 'ఇన్పుట్' , ( సంఘటన ) => {పత్రం. getElementById ( 'ప్రదర్శన' ) . అంతర్గత HTML = సంఘటన. లక్ష్యం . విలువ ;
} )
మీరు టెక్స్ట్ బాక్స్‌లో నమోదు చేసిన విలువను ఉపయోగించి విజయవంతంగా తిరిగి పొందినట్లు మీరు చూడవచ్చు విలువ ' గుణం:
అదంతా జావాస్క్రిప్ట్‌లోని “event.target” గురించి.
ముగింపు
ది ' ఈవెంట్.టార్గెట్ ” ఈవెంట్‌ను ప్రేరేపించిన/ప్రారంభించిన మూలకాన్ని సూచిస్తుంది. లక్ష్య మూలకం గురించి సమాచారాన్ని అందించే “event.target” ఆస్తికి సంబంధించిన కొన్ని లక్షణాలు ఉన్నాయి. ఉదాహరణకి, ' ఈవెంట్.టార్గెట్.ట్యాగ్‌నేమ్ ',' .విలువ ',' .id ',' .శైలి ”, మరియు మొదలైనవి. ఈ పోస్ట్ “event.target”, దాని లక్షణాలు మరియు జావాస్క్రిప్ట్‌లో దాని వినియోగాన్ని వివరించింది.