హెచ్టిఎంఎల్ డొమ్ డాక్యుమెంట్ అడ్డ్ ఎవెంట్ లిస్టెనర్ మెథడ్

నిర్వచనం మరియు వినియోగం

addEventListener() ఇవెంట్ హాండ్లర్‌ను డాక్యుమెంట్‌కు జతచేయు మాదిరి

ప్రకటన

ఉదాహరణ 1

డాక్యుమెంట్‌కు click ఇవెంట్‌ను జోడించండి:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

స్వయంగా ప్రయత్నించండి

సరళమైన సంక్రమణం:

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

డాక్యుమెంట్కు పలు సంఘటన పర్యవేక్షకులను జోడించవచ్చు:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 3

వివిధ రకాల సంఘటనలను జోడించవచ్చు:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 4

పారామీటర్లను పాస్ చేయటంలో అనామిక్ ఫంక్షన్ ఉపయోగించండి ఫంక్షన్ కాల్ చేయండి:

document.addEventListener("click", function() {
  myFunction(p1, p2);
});

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 5

డాక్యుమెంట్ యొక్క బ్యాక్గ్రౌండ్ రంగును మార్చుము:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 6

removeEventListener() మాథోడ్ ఉపయోగించండి:

// సంఘటన పర్యవేక్షకి జోడించు
document.addEventListener("mousemove", myFunction);
// సంఘటన పర్యవేక్షకి తొలగించు
document.removeEventListener("mousemove", myFunction);

స్వయంగా ప్రయత్నించండి

సంక్రమణం

document.addEventListener(type, function, capture)

పారామీటర్స్

పారామీటర్స్ వివరణ
type

అనేకం. సంఘటన పేరు.

"on" ప్రిఫిక్స్ ఉపయోగించకుండా ఉండండి.

"click" ఉపయోగించండి కాదు "onclick".

అన్ని HTML DOM సంఘటనలు ఇక్కడ జాబితాభుక్తం అవుతాయి:

HTML DOM Event ఆబ్జెక్ట్ పరిచయం మానికలు
function

అనేకం. సంఘటన జరిగినప్పుడు నడిచే ఫంక్షన్.

当事件发生时，将事件对象作为第一个参数传递给函数。

事件对象的类型取决于指定的事件。例如，"click" 事件属于 MouseEvent 对象。
capture

可选（默认 = false）。

  • true - 处理程序在捕获阶段执行
  • false - 处理程序在冒泡阶段执行

వారు తిరిగి పొందబడతాయి

ఏమీ లేదు.

సాంకేతిక వివరాలు

ఈ పద్ధతి నిర్దేశిత టైప్ ఇవెంట్ను నిర్వహించడానికి ప్రస్తుత నోడ్లపై నమోదు చేసిన ఇవెంట్ లిస్టెనర్ ఫంక్షన్ను జోడిస్తుంది. అప్పుడు capture క్రిందికి తప్పిపోతుంది, అప్పుడు లిస్టెనర్ పరిశీలక ఇవెంట్ లిస్టెనర్ గా నమోదు చేయబడింది. అప్పుడు capture క్రిందికి తప్పిపోతుంది, అది సాధారణ ఇవెంట్ లిస్టెనర్ గా నమోదు చేయబడింది.

addEventListener() బహుళార్థం కాల్ చేయబడవచ్చు, ఒకే నోడ్లపై ఒక రకం ఇవెంట్పై అనేక ఇవెంట్ హాండ్లర్స్ నమోదు చేయబడతాయి. కానీ, DOM అనేక ఇవెంట్ హాండ్లర్స్ కాల్ చేయబడే క్రమాన్ని నిర్ధారించలేదు.

ఒక ఇవెంట్ లిస్టెనర్ ఫంక్షన్ ఒకే నోడ్లపై అదే type మరియు capture పరంతులో నమోదు చేసిన రెండు సార్లు, రెండవ నమోదు తప్పిపోతుంది. ఒక నోడ్లపై ఒక ఇవెంట్ నిర్వహించినప్పుడు, ఆ నోడ్లపై కొత్త ఇవెంట్ లిస్టెనర్ నమోదు చేసినప్పుడు, ఆ ఇవెంట్పై కొత్త ఇవెంట్ లిస్టెనర్ కు కాల్ చేయబడదు.

పరంతులో ఉన్నప్పుడు Node.cloneNode() పద్ధతి లేదా Document.importNode() పద్ధతి ఒక Document నోడ్ను కాపీ చేసినప్పుడు, ఆరంభ నోడ్లపై నమోదు చేసిన ఇవెంట్ లిస్టెనర్స్ కాపీ చేయబడలేదు.

ఈ పద్ధతి కూడా Document మరియు Window ఆబ్జెక్ట్లపై నిర్వచించబడింది, మరియు అదే పద్ధతిలో పని చేస్తుంది.

బ్రౌజర్ మద్దతు

document.addEventListener ఇది DOM Level 2 (2001) లక్షణం.

అన్ని బ్రౌజర్లు పూర్తిగా దానిని మద్దతు ఇస్తాయి:

చ్రోమ్ ఐఈ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపరా
చ్రోమ్ ఐఈ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపరా
మద్దతు 9-11 మద్దతు మద్దతు మద్దతు మద్దతు

సంబంధిత పేజీలు

ఎలిమెంట్ పద్ధతులు

addEventListener() పద్ధతి

removeEventListener() పద్ధతి

డాక్యుమెంట్ పద్ధతులు

addEventListener() పద్ధతి

removeEventListener() పద్ధతి

శిక్షణ

HTML DOM EventListener

పూర్తి DOM ఇవెంట్ జాబితా