జావాస్క్రిప్ట్‌లో addEventListener () పద్ధతిని ఎలా అమలు చేయాలి?



AddEventListener () అనేది అంతర్నిర్మిత జావాస్క్రిప్ట్ ఫంక్షన్, ఇది ఈవెంట్‌ను వినడానికి మరియు వివరించిన ఈవెంట్ తొలగించబడినప్పుడు పిలువబడుతుంది.

ఒక సంఘటన ఒక ముఖ్యమైన భాగం సంభవించిన సంఘటన ప్రకారం వెబ్ పేజీ ప్రతిస్పందిస్తుంది. కొన్ని సంఘటనలు వినియోగదారు సృష్టించినవి మరియు కొన్ని API లచే సృష్టించబడతాయి. ఈ వ్యాసంలో, సంఘటనలు ఎలా జరుగుతాయో మరియు జావాస్క్రిప్ట్‌లోని addEventListener కింది క్రమంలో ఎలా ఉపయోగించబడుతుందో చూద్దాం:

ఈవెంట్ వినేవారు అంటే ఏమిటి?

ఈవెంట్ వినేవారు జావాస్క్రిప్ట్‌లోని ఒక ప్రక్రియ, ఇది ఒక సంఘటన జరిగే వరకు వేచి ఉంటుంది. ఒక సాధారణ ఉదాహరణ ఈవెంట్ వినియోగదారు మౌస్ క్లిక్ చేయడం లేదా కీబోర్డ్‌లో కీని నొక్కడం.





ది addEventListener () ఒక అంతర్నిర్మిత జావాస్క్రిప్ట్ ఫంక్షన్ ఇది ఈవెంట్ వినడానికి పడుతుంది మరియు వివరించిన సంఘటన తొలగించబడినప్పుడల్లా రెండవ వాదనను పిలుస్తారు. ఇప్పటికే ఉన్న ఈవెంట్ హ్యాండ్లర్లను ఓవర్రైట్ చేయకుండా ఎన్ని ఈవెంట్ హ్యాండ్లర్లను ఒకే మూలకానికి చేర్చవచ్చు.

జావాస్క్రిప్ట్లో addEventListener ()

వాటిలో కొన్ని లక్షణాలు ఈవెంట్ వినేవారి పద్ధతిలో ఇవి ఉన్నాయి:



  • ది addEventListener () పద్ధతి ఒక జత చేస్తుంది ఈవెంట్ హ్యాండ్లర్ పేర్కొన్న మూలకానికి.
  • ఈ పద్ధతి ఈవెంట్ ఎలిమెంట్ లేకుండా ఒక మూలకానికి జతచేస్తుంది ఓవర్రైటింగ్ ఇప్పటికే ఉన్న ఈవెంట్ హ్యాండ్లర్లు.
  • మీరు జోడించవచ్చు చాలా ఈవెంట్ హ్యాండ్లర్లు ఒక మూలకానికి.
  • మీరు చాలా ఈవెంట్ హ్యాండ్లర్లను జోడించవచ్చు ఒకే రకం ఒకదానికి మూలకం , అనగా రెండు “క్లిక్” ఈవెంట్‌లు.
  • ఈవెంట్ శ్రోతలను ఎవరికైనా చేర్చవచ్చు తీర్పు ఆబ్జెక్ట్ HTML అంశాలు మాత్రమే కాదు. అంటే విండో ఆబ్జెక్ట్.
  • AddEventListener () పద్ధతి దీన్ని చేస్తుంది సులభం ఎలా నియంత్రించాలో ఈవెంట్ స్పందిస్తుంది బబ్లింగ్ చేయడానికి.

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

అలాగే, మీరు ఉపయోగించడం ద్వారా ఈవెంట్ వినేవారిని సులభంగా తొలగించవచ్చు removeEventListener () పద్ధతి .

సింటాక్స్:



target.addEventListener (రకం, వినేవారు [, ఎంపికలు]) target.addEventListener (రకం, వినేవారు [, useCapture]) target.addEventListener (రకం, వినేవారు [, useCapture, wantUntrusted])

పరామితి విలువలు

పరామితి వివరణ

ఈవెంట్

అవసరం. ఈవెంట్ పేరును పేర్కొనే స్ట్రింగ్.

గమనిక: “ఆన్” ఉపసర్గను ఉపయోగించవద్దు. ఉదాహరణకు, “ఆన్‌క్లిక్” కు బదులుగా “క్లిక్” ఉపయోగించండి.

అన్ని HTML DOM ఈవెంట్‌ల జాబితా కోసం, మా పూర్తి HTML DOM ఈవెంట్ ఆబ్జెక్ట్ రిఫరెన్స్ చూడండి.

ఫంక్షన్

అవసరం. ఈవెంట్ జరిగినప్పుడు అమలు చేయవలసిన ఫంక్షన్‌ను పేర్కొంటుంది.

html లోని స్పాన్ ట్యాగ్ ఏమిటి

ఈవెంట్ సంభవించినప్పుడు, ఈవెంట్ ఆబ్జెక్ట్ మొదటి పరామితిగా ఫంక్షన్‌కు పంపబడుతుంది. ఈవెంట్ రకం వస్తువు పేర్కొన్న సంఘటనపై ఆధారపడి ఉంటుంది. ఉదాహరణకు, “క్లిక్” ఈవెంట్ మౌస్ఈవెంట్ ఆబ్జెక్ట్‌కు చెందినది.

useCapture

ఐచ్ఛికం. ఈవెంట్‌ను సంగ్రహించడంలో లేదా బబ్లింగ్ దశలో అమలు చేయాలా అని నిర్దేశించే బూలియన్ విలువ.

సాధ్యమయ్యే విలువలు: నిజం - సంగ్రహించే దశ-డిఫాల్ట్‌లో ఈవెంట్ హ్యాండ్లర్ అమలు చేయబడుతుంది. ఈవెంట్ హ్యాండ్లర్ బబ్లింగ్ దశలో అమలు చేయబడుతుంది


ఈవెంట్ వినేవారు ఎలా పనిచేస్తారో ఇప్పుడు మీకు తెలుసు, జావాస్క్రిప్ట్‌లోని addEventListener () యొక్క ఉదాహరణను చూద్దాం.

జావాస్క్రిప్ట్‌లో addEventListener (): ఉదాహరణ

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt ఈ ఉదాహరణ ఒక వినియోగదారు ఒక బటన్‌పై క్లిక్ చేసినప్పుడు ఒక ఫంక్షన్‌ను అమలు చేయడానికి addEventListener () పద్ధతిని ఉపయోగిస్తుంది. & lt / p & gt & ltbutton id = 'myBtn ('myBtn'). addEventListener ('క్లిక్', myFunction) ఫంక్షన్ myFunction () {document.getElementById ('డెమో').

జావాస్క్రిప్ట్లో addEventListener

దీనితో, మేము జావాస్క్రిప్ట్‌లోని ఈ addEventListener ముగింపుకు వచ్చాము. ఈవెంట్ వినేవారు ఎలా అర్థం చేసుకున్నారో నేను నమ్ముతున్నాను పద్ధతి జావాస్క్రిప్ట్‌లో పనిచేస్తుంది.

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

మాకు ప్రశ్న ఉందా? దయచేసి దీనిని “జావాస్క్రిప్ట్‌లోని addEventListener” బ్లాగులోని వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.