HTML DOM addEventListener() పద్ధతి
- పైకి తిరిగి వెళ్ళు accessKey
- తదుపరి పేజీ appendChild()
- పైకి తిరిగి వెళ్ళు HTML DOM Elements ఆబ్జెక్ట్
నిర్వచనం మరియు వినియోగం
addEventListener() ప్రమాణంలో ప్రమాణికమైన అనువర్తనాన్ని మెటాడ్యూల్ కు జతచేయడం
实例
ఉదాహరణ 1
<button> ఎలిమెంట్‌కు click ఇవెంట్ జోడించండి:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
ఉదాహరణ 2
సరళమైన కోడ్:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
మరిన్ని ఉదాహరణలను పేజీ కింద కనుగొనవచ్చు.
సింథాక్స్
element.addEventListener(type, ఫంక్షన్, useCapture)
పరామీతులు
| పరామీతులు | వివరణ |
|---|---|
| type |
ఇవెంట్ పేరు అవసరం. క్లిక్ "on" ప్రిఫిక్స్ వద్దకు ఉపయోగించకండి. క్లిక్ వద్దకు బదులుగా "onclick" ఉపయోగించకండి. |
| ఫంక్షన్ | ఇవెంట్ జరగటం సమయంలో నిర్వహించే ఫంక్షన్. |
| useCapture |
ఆప్షనల్ (డిఫాల్ట్ = ఫాల్స్)
|
వాటర్స్
లేదు.
సాంకేతిక వివరాలు
ఈ పద్ధతి ప్రస్తుత నోడ్‌పై నమోదు చేసిన ఇవెంట్ లిస్టెనర్ ఫంక్షన్‌ను నమోదు చేస్తుంది, దానిని ప్రస్తుత నోడ్‌పై నమోదు చేసిన ఇవెంట్ పై ప్రాసెస్ చేయడానికి ఉపయోగిస్తారు. type ఇవెంట్ పై ఉన్న సంఘటనలు. useCapture ట్రూ ఉంటే, లిస్టెనర్ పిలువబడే విధం పరిగణనకు పెట్టబడుతుంది. అయితే useCapture ఫాల్స్ ఉంటే, ఇది సాధారణ ఇవెంట్ లిస్టెనర్ గా నమోదు చేయబడుతుంది.
addEventListener() అనేకసార్లు పిలువబడవచ్చు, ఒకే నోడ్‌పై ఒకే రకమైన ఇవెంట్ హ్యాండ్లర్స్ నమోదు చేయవచ్చు. కానీ, డామ్ అనేక హ్యాండ్లర్స్ పిలువబడే క్రమాన్ని తెలుసుకోలేదు.
ఒక ఇవెంట్ లిస్టెనర్ ఫంక్షన్ ఒకే నోడ్‌పై అదే రీతిలో నమోదు చేయబడితే type మరియు useCapture పరామీతి రెండుసార్లు నమోదు చేయబడితే, రెండవ నమోదు పరిగణనకు లేదు. ఒక నోడ్‌పై ఇవెంట్ నిర్వహించటం సమయంలో ఆ నోడ్‌పై కొత్త ఇవెంట్ లిస్టెనర్ నమోదు చేయబడితే, ఆ ఇవెంట్‌పై కొత్త లిస్టెనర్ పిలువబడదు.
ఈ పద్ధతి వద్ద Node.cloneNode() పద్ధతి లేదా Document.importNode() డాక్యుమెంట్ నోడ్ కాపీ చేసినప్పుడు, అసలు నోడ్‌పై నమోదు చేసిన ఇవెంట్ లిస్టెనర్స్ కాపీ చేయబడవు.
ఈ పద్ధతి కూడా డాక్యుమెంట్ మరియు విండో ఆబ్జెక్ట్‌పై నిర్వచించబడిన మరియు అదే రీతిలో పని చేస్తాయి.
మరిన్ని ఉదాహరణలు
ఉదాహరణ 3
మీరు ఒకే ఎలిమెంట్‌కు అనేక సంఘటనలను జోడించవచ్చు:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
ఉదాహరణ 4
మీరు ఒకే ఎలిమెంట్‌కు వివిధ సంఘటనలను జోడించవచ్చు:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
ఉదాహరణ 5
పారామీటర్ విలువలను పంపడానికి "అనామక ఫంక్షన్" ఉపయోగించండి:
element.addEventListener("click", function() {
myFunction(p1, p2);
});
ఉదాహరణ 6
బటన్ మూలకం బ్యాక్గ్రౌండ్ కలర్ మార్చండి:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
ఉదాహరణ 7
బాయిలప్ మరియు కాప్చర్ పేరియడ్ ఉన్నతికి విరుద్ధంగా ఉంటాయి:
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
ఉదాహరణ 8
ఇవెంట్ హాండ్లర్ తొలగించండి:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
బ్రౌజర్ మద్దతు
element.addEventListener() ఇది DOM Level 2 (2001) ఫంక్షన్ గా ఉంది.
అన్ని బ్రౌజర్లు పూర్తిగా ఇది మద్దతు ఇస్తాయి:
| చ్రోమ్ | ఐఇ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|---|
| చ్రోమ్ | ఐఇ | ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
| మద్దతు | 9-11 | మద్దతు | మద్దతు | మద్దతు | మద్దతు |
సంబంధిత పేజీలు
మూలక పద్ధతులు:
డాక్యుమెంట్ పద్ధతులు:
శిక్షణాలు:
- పైకి తిరిగి వెళ్ళు accessKey
- తదుపరి పేజీ appendChild()
- పైకి తిరిగి వెళ్ళు HTML DOM Elements ఆబ్జెక్ట్
