జావాస్క్రిప్ట్‌లోని ఈవెంట్‌లు ఏమిటి మరియు అవి ఎలా నిర్వహించబడతాయి?



జావాస్క్రిప్ట్‌లోని సంఘటనలు వెబ్‌పేజీకి డైనమిక్ ఇంటర్‌ఫేస్‌ను అందిస్తాయి. ఈ సంఘటనలు డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) లోని మూలకాలతో అనుసంధానించబడి ఉన్నాయి.

సంఘటనలు వ్యవస్థలో జరిగే చర్యలు లేదా సంఘటనలు. ప్రోగ్రామింగ్ ప్రపంచంలో, సంఘటనలు HTML మూలకాలకు జరిగేవి. కానీ ఎప్పుడు HTML పేజీలలో ఉపయోగించబడుతుంది, ఇది ఈ సంఘటనలకు ప్రతిస్పందిస్తుంది. ఈ వ్యాసంలో, జావాస్క్రిప్ట్‌లోని వివిధ రకాల సంఘటనలు ఏమిటి మరియు అవి ఎలా పని చేస్తాయో ఈ క్రింది క్రమంలో చూస్తాము:

జావాస్క్రిప్ట్‌లోని ఈవెంట్‌లు ఏమిటి?

జావాస్క్రిప్ట్ వెబ్‌పేజీకి డైనమిక్ ఇంటర్‌ఫేస్‌ను అందించే సంఘటనలను కలిగి ఉంది. ఈ సంఘటనలు లోని మూలకాలతో అనుసంధానించబడి ఉన్నాయి డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (తీర్పు).





జావాలో పూర్ణాంకానికి డబుల్ ఎలా వేయాలి

అలాగే, ఈ సంఘటనలు అప్రమేయంగా బబ్లింగ్ ప్రచారాన్ని ఉపయోగిస్తాయి, అనగా DOM లో పిల్లల నుండి తల్లిదండ్రుల వరకు. మేము సంఘటనలను ఇన్లైన్ లేదా బాహ్య లిపిలో బంధించవచ్చు. జావాస్క్రిప్ట్ సహాయంతో, కొన్ని సంఘటనలు ఎప్పుడు జరుగుతాయో మీరు గుర్తించవచ్చు మరియు ఆ సంఘటనలకు ప్రతిస్పందనగా విషయాలు సంభవించవచ్చు.

జావాస్క్రిప్ట్లో ఈవెంట్స్ రకాలు

లో వివిధ రకాల సంఘటనలు ఉన్నాయి సంఘటనలకు ప్రతిస్పందించడానికి ఉపయోగిస్తారు. ఇక్కడ, మేము ప్రసిద్ధ లేదా సాధారణంగా ఉపయోగించే కొన్ని సంఘటనలను చర్చిస్తాము:



  • ఆన్క్లిక్
  • ఓంకీఅప్
  • ఆన్‌మౌస్‌ఓవర్
  • ఆన్‌లోడ్
  • ఆన్ ఫోకస్

కాబట్టి మనం ముందుకు సాగండి మరియు జావాస్క్రిప్ట్‌లోని ఈ సంఘటనలను ఉదాహరణతో చూద్దాం.

ఆన్క్లిక్ ఈవెంట్

ఆన్క్లిక్ ఈవెంట్ ఒక మౌస్ ఈవెంట్ మరియు వినియోగదారు దానికి కట్టుబడి ఉన్న మూలకంపై క్లిక్ చేస్తే నిర్వచించిన ఏదైనా తర్కాన్ని రేకెత్తిస్తుంది. ఒక ఉదాహరణ తీసుకుందాం మరియు ఇది ఎలా పనిచేస్తుందో చూద్దాం:

ఫంక్షన్ edu () {హెచ్చరిక ('ఎడురేకాకు స్వాగతం!') Button బటన్ క్లిక్ చేయండి

అవుట్పుట్:



అవుట్పుట్ 1 - జావాస్క్రిప్ట్లో సంఘటనలు - ఎడురేకా

బటన్‌ను క్లిక్ చేసిన తర్వాత, మీకు ఈ క్రింది హెచ్చరిక సందేశం వస్తుంది:

వన్‌కీఅప్ ఈవెంట్

ఈ ఈవెంట్ కీబోర్డ్ ఈవెంట్ మరియు నొక్కిన తర్వాత కీ విడుదలైనప్పుడల్లా సూచనలను అమలు చేయడానికి ఇది ఉపయోగించబడుతుంది. కింది ఉదాహరణ ఈవెంట్ యొక్క పనిని చూపిస్తుంది:

var a = 0 var b = 0 var c = 0 ఫంక్షన్ మార్పుబ్యాక్‌గ్రౌండ్ () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}

అవుట్పుట్:

మీరు ఏదైనా వ్రాసిన తర్వాత, ఇది ఇలా కనిపిస్తుంది:

ఆన్‌మౌస్‌ఓవర్ ఈవెంట్

జావాస్క్రిప్ట్‌లోని ఆన్‌మౌస్‌ఓవర్ ఈవెంట్ ఎలిమెంట్ మరియు దాని పిల్లలపై మౌస్ పాయింటర్‌ను కదిలించటానికి అనుగుణంగా ఉంటుంది. ఉదాహరణ క్రింద చూపబడింది:

ఫంక్షన్ hov () {var e = document.getElementById ('హోవర్') e.style.display = 'none'}

అవుట్పుట్:

ఎలుకను కదిలించే ముందు రంగు పెట్టె కనిపిస్తుంది. మీరు పెట్టెపై మౌస్ను ఉంచిన వెంటనే, అది అదృశ్యమవుతుంది.

ఆన్‌లోడ్ ఈవెంట్

ఒక మూలకం పూర్తిగా లోడ్ అయినప్పుడు ఆన్‌లోడ్ ఈవెంట్ ప్రేరేపించబడుతుంది. ఒక ఉదాహరణ తీసుకుందాం మరియు ఇది ఎలా పనిచేస్తుందో చూద్దాం:

  edu-Logo 

అవుట్పుట్:

ఆన్ ఫోకస్ ఈవెంట్

ఆన్‌ఫోకస్ ఈవెంట్‌లో ఎలిమెంట్ లిస్టింగ్ ఉంది, ఇది ఫోకస్ అందుకున్నప్పుడల్లా సూచనలను అమలు చేస్తుంది. కింది ఉదాహరణ ఆన్ ఫోకస్ ఈవెంట్ ఎలా పనిచేస్తుందో చూపిస్తుంది:

ఫంక్షన్ ఫోకస్ () {var e = document.getElementById ('ఇన్పుట్') if (నిర్ధారించండి ('ఈవెంట్ ఫోకస్')) {e.blur ()}}

ఇన్‌పుట్ బాక్స్‌లో దృష్టి పెట్టండి:

అవుట్పుట్:

జావాస్క్రిప్ట్‌లో ఎక్కువగా ఉపయోగించే కొన్ని సంఘటనలు ఇవి. దీనితో, మేము మా వ్యాసం ముగింపుకు వచ్చాము. సంఘటనలు ఏమిటి మరియు అవి ఎలా ఉపయోగించబడుతున్నాయో మీరు అర్థం చేసుకున్నారని నేను ఆశిస్తున్నాను.

మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.

మాకు ప్రశ్న ఉందా? దయచేసి ఈ బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.