ఈవెంట్ ప్రవాహం సమయంలో జావాస్క్రిప్ట్లో ఈవెంట్ బబ్లింగ్ మరియు ఈవెంట్ క్యాప్చరింగ్ ఎక్కువగా ఉపయోగించబడుతున్న పదాలు. HTML DOM API లో ఈవెంట్ ప్రచారం యొక్క రెండు మార్గాలు ఇవి. జావాస్క్రిప్ట్లో ఈవెంట్ బబ్లింగ్ మరియు ఈవెంట్ క్యాప్చరింగ్‌పై ఈ వ్యాసం మనకు వీటిని ఎందుకు అవసరమో వివరంగా వివరిస్తుంది కింది క్రమంలో:
జావాస్క్రిప్ట్లో ఈవెంట్ బబ్లింగ్ అంటే ఏమిటి?
ఈవెంట్ బబ్లింగ్ అనేది వెబ్ అప్లికేషన్ లేదా వెబ్‌పేజీని ఉపయోగించి అభివృద్ధి చెందుతున్నప్పుడు ప్రజలు తప్పక చూడవలసిన పదం . సాధారణంగా, ఈవెంట్ బబ్లింగ్ అనేది ఒక టెక్నిక్, దీనిలో ఒక అంశం మరొక వస్తువుపై గూడు కట్టుకున్నప్పుడు ఈవెంట్ హ్యాండ్లర్లను పిలుస్తారు మరియు అదే సంఘటనలో ఉండాలి. ఇది ఎన్‌క్యాప్సులేషన్ మాదిరిగానే ఉంటుంది.
ఈవెంట్ బబ్లింగ్ అనేది జావాస్క్రిప్ట్లో ఈవెంట్ హ్యాండ్లింగ్‌లో కొద్ది భాగం మాత్రమే. దీన్ని బాగా అర్థం చేసుకోవడానికి ఈవెంట్ ప్రచారం గురించి మరియు ఇది ఈవెంట్ బబ్లింగ్‌కు ఎలా మద్దతు ఇస్తుందో తెలుసుకోవాలి.
ఈవెంట్ ప్రచారం అంటే ఏమిటి?
ఈవెంట్ ప్రచారాన్ని మాతృ పదంగా ఈవెంట్ బబ్లింగ్ మరియు దాని పిల్లవాడిగా బంధించడం తో పోల్చవచ్చు.ఇది క్రింది విధంగా సూచించబడుతుంది:
మీరు ఏదైనా చిత్రంపై క్లిక్ చేస్తే అది క్లిక్ ఈవెంట్‌ను మాత్రమే సృష్టించదు కానీ అది పేరెంట్ “ఎ” మరియు తాత “లి” లకు వెళుతుంది. ఈ విధంగా ఫంక్షన్ యొక్క ప్రచారం జరుగుతుంది. ఇక్కడ చిత్రం పిల్లవాడిగా పరిగణించబడుతుంది మరియు ఇది క్లిక్ ఉత్పత్తి అయిన ఈవెంట్ లక్ష్యం. చిత్రం దాని పూర్వీకులతో కలిసి చెట్టు పరిభాషలో శాఖను ఏర్పరుస్తుంది. ఈవెంట్ ప్రచారం చేసే మార్గాన్ని తెలుసుకున్నప్పుడు శాఖ ముఖ్యమైనది.
ప్రతి శ్రోతలను ఈవెంట్ గురించి సమాచారాన్ని సేకరించే ఈవెంట్ ఆబ్జెక్ట్‌తో పిలుస్తారు. ఇచ్చిన ఈవెంట్ కోసం శ్రోతలందరినీ పిలిచే విధానాన్ని మేము తెలుసుకున్నందున ఈ ప్రచారం చాలా ముఖ్యం. పై చిత్రం నుండి బ్రాంచ్ డిటర్నిషన్ స్టాటిక్ అని మనం గమనించవచ్చు. ఈవెంట్ సమయంలో ఏదైనా చెట్టు మార్పులు విస్మరించబడతాయి. ఇక్కడ ప్రచారం ద్వి దిశాత్మకమైనది, అది విండో నుండి ఈవెంట్ లక్ష్యానికి వెళ్లి తిరిగి వస్తుంది. ఇక్కడ ప్రచారం విస్తృతంగా మూడు ప్రధాన రకాలుగా వర్గీకరించబడింది. అవి:
- సంగ్రహ దశ: విండో నుండి ఈవెంట్ లక్ష్య దశకు వెళుతుంది.
- లక్ష్య దశ: ఇది లక్ష్య దశ.
- బబుల్ దశ: ఈవెంట్ టార్గెట్ పేరెంట్ నుండి తిరిగి విండోకు.
ఈవెంట్ క్యాప్చరింగ్ అంటే ఏమిటి?
ఈ దశలో, క్యాప్చర్ శ్రోతలను పిలుస్తారు, దీని విలువ “ట్రూ” గా నమోదు చేయబడింది. ఇది ఇలా వ్రాయబడింది:
డేటా సైన్స్ కోర్సు అంటే ఏమిటి
el.addEventListener ('క్లిక్', వినేవారు, నిజం)ఇక్కడ వినేవారి విలువ “నిజం” అని నమోదు చేయబడింది కాబట్టి ఈ ఈవెంట్ సంగ్రహించబడుతుంది. విలువ లేకపోతే అప్రమేయంగా విలువ తప్పు మరియు ఈవెంట్ సంగ్రహించబడదు. కాబట్టి ఈ దశలో దాని విలువ నిజం అయిన సంఘటన విండో నుండి వారి మార్గాన్ని మాత్రమే కనుగొంటుంది మరియు పిలువబడుతుంది మరియు సంగ్రహించబడుతుంది.
ఈవెంట్ టార్గెట్ దశలో, నమోదు చేసిన శ్రోతలందరూ వారి జెండా స్థితితో సంబంధం లేకుండా నిజం లేదా తప్పు అని పిలుస్తారు.
జావాస్క్రిప్ట్లో ఈవెంట్ బబ్లింగ్ మరియు ఈవెంట్ క్యాప్చరింగ్ యొక్క ఉపయోగం
బబ్లింగ్ దశలో, సంగ్రహించనివారిని మాత్రమే పిలుస్తారు, ఇది జెండా విలువను 'తప్పుడు' గా కలిగి ఉన్న సంఘటనలు. DOM (డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్) పరిభాషలో ఈవెంట్ బబ్లింగ్ మరియు ఈవెంట్ క్యాప్చరింగ్ చాలా ఉపయోగకరంగా మరియు ముఖ్యమైనవి.
el.addEventListener ('క్లిక్', వినేవారు, తప్పుడు) // వినేవారు el.addEventListener ('క్లిక్', వినేవారు) // వినేవారు పట్టుకోరుకోడ్ పైన ఉన్న భాగం బబ్లింగ్ మరియు సంగ్రహ దశ యొక్క పనిని చూపుతుంది. అన్ని ఈవెంట్‌లు ఈవెంట్ లక్ష్యానికి వెళ్లవు. వాటిలో కొన్ని బబుల్ అవ్వవు. లక్ష్య దశ తర్వాత వారి ప్రయాణం ఆగిపోతుంది. మూడు ఈవెంట్ దశల ప్రవాహం క్రింది రేఖాచిత్రంలో వివరించబడింది:
ఈవెంట్ బబ్లింగ్ అన్ని రకాల సంఘటనలలో పనిచేయదు, అయినప్పటికీ, వినేవారు తప్పనిసరిగా కలిగి ఉండాలి '.బుడగ ఈవెంట్ ఆబ్జెక్ట్ యొక్క బూలియన్ ఆస్తి. ఇతర లక్షణాలలో కొన్ని:
- e.target: ఇది ఈవెంట్ లక్ష్యాన్ని సూచిస్తుంది.
- e.currentTarget: ఇది ప్రస్తుత శ్రోతలు నమోదు చేయబడిన మోడ్. ఇక్కడ ఉపయోగించడం ద్వారా విలువ సూచించబడుతుంది ఇది కీవర్డ్.
- e.eventPhase: ఇది పూర్ణాంకం వంటి ఇతర మూడు కీవర్డ్‌లను సూచిస్తుంది సంగ్రహించడం_ఫేస్, బబ్లింగ్_ఫేస్, AT_Target దశ.
పని విధానం
పై దృష్టాంతంలో నిశితంగా పరిశీలిద్దాం. “ButtonOne” మూలకాన్ని క్లిక్ చేద్దాం, ఆపై వెంటనే ఒక సంఘటన ప్రారంభించబడుతుంది. సాధారణంగా ఒక సంఘటన చెట్టు యొక్క అగ్ర మూలకం అయిన మూలం నుండి దాని ప్రయాణాన్ని ప్రారంభిస్తుంది. అప్పుడు అది “బటన్ఒన్” అనే టార్గెట్ ఈవెంట్‌ను చెట్టును అనుసరిస్తుంది. ఇది ఎలా ప్రయాణిస్తుందో ఇక్కడ ఉంది:
విండోస్ 10 లో php ని ఇన్‌స్టాల్ చేయండి
చిత్రంలో చూపినట్లుగా, ఈవెంట్ DOM పరిభాషల ద్వారా చివరికి లక్ష్య సంఘటనకు చేరుకుంటుంది. ఇప్పుడు ఈవెంట్ దాని లక్ష్యాన్ని చేరుకున్న తర్వాత అది అంతం కాదు. దిగువ చిత్రంలో వివరించిన విధంగా ఇది DOM పరిభాషలలో కొనసాగుతుంది.
మునుపటిలాగే, ఈవెంట్ యొక్క మార్గం వెంట ఉన్న ప్రతి మూలకం దాని ఉనికి గురించి తెలియజేయబడుతుంది. ఇది ఇలాగే కొనసాగుతున్నప్పుడు, మేము ఈ ప్రక్రియను ఆపగలమా లేదా అని మీరు ఆలోచిస్తూ ఉండాలి. సరే, ప్రశ్నకు సమాధానం అవును మేము ఈవెంట్ యొక్క ప్రచారాన్ని ఆపవచ్చు. ఇది ప్రారంభించడం ద్వారా జరుగుతుంది “స్టాప్‌ప్రొపగేషన్” ఈవెంట్ ఆబ్జెక్ట్ యొక్క పద్ధతి.
window.addEventListener ('క్లిక్', e => {e.stopPropagation () true, true) window.addEventListener ('క్లిక్', వినేవారు ('c1'), నిజం) window.addEventListener ('క్లిక్', వినేవారు ('c2 '), నిజం) window.addEventListener (' క్లిక్ ', వినేవారు (' b1 ')) window.addEventListener (' క్లిక్ ', వినేవారు (' b2 '))కీవర్డ్‌ని వర్తింపజేయడం ద్వారా మేము ప్రచారాన్ని ఆపగలుగుతాము. మేము కీవర్డ్‌ని వర్తింపజేస్తున్నప్పుడు ఇది ఇలా పనిచేస్తుంది “ stopPropagation ” అప్పుడు ప్రధాన సంఘటనల క్రింద ఉన్న అన్ని సంఘటనలు పిలువబడవు మరియు అందువల్ల పైన పేర్కొన్న కోడ్ ముక్కలో పేర్కొన్నందున అవి పిలువబడవు. “అనే మరో కీవర్డ్ ఉంది stopImmediatePropagation ”. పేరు సూచించినట్లు అది వెంటనే తోబుట్టువుల కార్యకలాపాలను ఆపివేస్తుంది.
దీనితో, మేము మా వ్యాసం చివరికి వచ్చాము. జావాస్క్రిప్ట్లో ఈవెంట్ బబ్లింగ్ మరియు ఈవెంట్ క్యాప్చరింగ్ అంటే ఏమిటో మీరు అర్థం చేసుకున్నారని నేను ఆశిస్తున్నాను.
జావాస్క్రిప్ట్లో ఈవెంట్ బబ్లింగ్ మరియు ఈవెంట్ క్యాప్చరింగ్ గురించి మీకు ఇప్పుడు తెలుసు, చూడండి ఎడురేకా చేత. వెబ్ డెవలప్‌మెంట్ సర్టిఫికేషన్ శిక్షణ HTML5, CSS3, ట్విట్టర్ బూట్‌స్ట్రాప్ 3, j క్వెరీ మరియు గూగుల్ API లను ఉపయోగించి ఆకట్టుకునే వెబ్‌సైట్‌లను ఎలా సృష్టించాలో తెలుసుకోవడానికి మరియు అమెజాన్ సింపుల్ స్టోరేజ్ సర్వీస్ (S3) కు ఎలా అమలు చేయాలో తెలుసుకోవడానికి మీకు సహాయం చేస్తుంది.
మాకు ప్రశ్న ఉందా? దయచేసి “జావాస్క్రిప్ట్లో ఈవెంట్ బబ్లింగ్ మరియు ఈవెంట్ క్యాప్చరింగ్” యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.