జావాస్క్రిప్ట్ హెచ్టిఎంఎల్ డొమ్ ఇవెంట్ లిసెన్టర్

addEventListener() మార్గం

ఇన్స్టాన్స్

బటన్ నొక్కినప్పుడు ప్రారంభించే ఇవెంట్ లిస్టెనర్ జోడించు:

document.getElementById("myBtn").addEventListener("click", displayDate);

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

addEventListener() నిర్దిష్ట మూలకు నిర్దిష్ట ఇవెంట్‌హాండ్లర్ జోడించే మార్గం.

addEventListener() ప్రస్తుత ఇవెంట్‌హాండ్లర్స్ మీద అధిగమించకుండా ఇవెంట్‌హాండ్లర్స్ జోడించే మార్గం.

మీరు ఒక మూలకు పలు ఇవెంట్‌హాండ్లర్స్ జోడించవచ్చు.

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

ఈ పద్ధతి ఉపయోగించినప్పుడు, addEventListener() ఈ పద్ధతి ఉపయోగించినప్పుడు,

ఈ పద్ధతి ఉపయోగించినప్పుడు, జావాస్క్రిప్ట్ మరియు హెచ్టిఎంఎల్ టాగ్స్ అనుసరించబడడం ద్వారా అధిక పఠనానుకూలత ఉంటుంది; హెచ్టిఎంఎల్ టాగ్స్ ని నియంత్రించకుండా ఉన్నప్పటికీ ఇన్టర్వెంట్ హాండ్లర్స్ జోడించడానికి అనుమతిస్తుంది. removeEventListener() మెండ్ ఇన్టర్వెంట్ హాండ్లర్స్ ని సులభంగా తొలగించడానికి ఈ పద్ధతి ఉపయోగపడుతుంది.

సింటాక్స్

ఎలిమెంట్.addEventListener(ఇవెంట్, ఫంక్షన్, useCapture);

మొదటి పారామీటర్ ఈవెంట్ రకం (ఉదాహరణకు "click" లేదా "mousedown") ఉంది.

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

మూడవ పారామీటర్ బౌలియన్ విలువ ఉంది, ఇది ఇన్టర్వెంట్ పై ఈవెంట్ బాప్పింగ్ లేదా కాప్చర్ ఉపయోగించబడుతుంది. ఈ పారామీటర్ ఆప్షనల్ ఉంది.

నోట్:ఇన్టర్వెంట్స్ పై "on" ప్రత్యక్షించు ప్రత్యక్షించుట లేదు; "click" ని ఉపయోగించండి బదులుగా "onclick".

ఐటమ్కు ఇన్టర్వెంట్ హాండ్లర్ జోడించండి

ఇన్స్టాన్స్

వినియోగదారు ఒక ఐటమ్కు క్లిక్ చేసినప్పుడు "హలో వరల్డ్!" ప్రదర్శించండి:

ఎలిమెంట్.addEventListener("click", function(){ alert("హలో వరల్డ్!"); });

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

మీరు బాహ్య "పేరునించబడిన" ఫంక్షన్స్ ని సూచించవచ్చు:

ఇన్స్టాన్స్

వినియోగదారు ఒక ఐటమ్కు క్లిక్ చేసినప్పుడు "హలో వరల్డ్!" ప్రదర్శించండి:

ఎలిమెంట్.addEventListener("click", myFunction);
function myFunction() {
    alert ("హలో వరల్డ్!");
}

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

అదే ఐటమ్కు పలు ఇన్టర్వెంట్ హాండ్లర్స్ జోడించండి

addEventListener() ఈ పద్ధతి అదే ఐటమ్కు పలు ఇన్టర్వెంట్స్ జోడించవచ్చు, ప్రతిపాదిత ఇన్టర్వెంట్స్ ని స్పర్శించకుండా ఉంచడం వంటి విధంగా ఉంటుంది:

ఇన్స్టాన్స్

ఎలిమెంట్.addEventListener("click", myFunction);
ఎలిమెంట్.addEventListener("click", mySecondFunction);

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

మీరు అదే ఐటమ్కు వివిధ రకాల ఇన్టర్వెంట్స్ జోడించవచ్చు:

ఇన్స్టాన్స్

ఎలిమెంట్.addEventListener("mouseover", myFunction);
ఎలిమెంట్.addEventListener("click", mySecondFunction);
ఎలిమెంట్.addEventListener("mouseout", myThirdFunction);

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

విండో ఒబ్జెక్ట్ కు ఇన్టర్వెంట్ హాండ్లర్ జోడించండి

addEventListener() మీరు ప్రతి హెచ్టిఎంఎల్ డామ్ ఒబ్జెక్ట్ కు ప్రత్యక్షించు కాలింగ్ జనరేటర్ జోడించవచ్చు, ఉదాహరణకు హెచ్టిఎంఎల్ ఐటమ్స్, హెచ్టిఎంఎల్ ఒబ్జెక్ట్స్, విండో ఒబ్జెక్ట్ లేదా ఇతర ఇన్టర్వెంట్ ప్రత్యక్షించు కాలింగ్ జనరేటర్స్ ఉన్న ప్రతి హెచ్టిఎంఎల్ డామ్ ఒబ్జెక్ట్ కు, ఉదాహరణకు xmlHttpRequest ఒబ్జెక్ట్ కు.

ఇన్స్టాన్స్

వినియోగదారు విండో పరిమాణాన్ని మార్చుకున్నప్పుడు జరుగుతున్న ఇన్టర్వెంట్ అనుసరించుటకు ప్రత్యక్షించు కాలింగ్ జనరేటర్ జోడించండి:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

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

పారామీటర్లు పంపిణీ చేయండి

పారామీటర్లను పంపిణీ చేయటం వద్ద, నిర్దేశించిన ఫంక్షన్ను కాల్ చేసే అనామిక ఫంక్షన్ను పారామితి రూపంలో ఉపయోగించండి:

ఇన్స్టాన్స్

ఎలిమెంట్.addEventListener("click", function(){ myFunction(p1, p2); });

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

ఇవెంట్ ప్రసారం లేదా పరిశీలన?

HTML DOM లో ఇవెంట్ ప్రసారం రెండు పద్ధతులు ఉన్నాయి: ప్రసారం మరియు పరిశీలన.

ఇవెంట్ ప్రసారం ఒక పద్ధతిని నిర్వహిస్తుంది ఇది సంఘటన జరగించినప్పుడు మూలకాలను నిర్వహించే క్రమాన్ని నిర్వహిస్తుంది. ఉదాహరణకు, ఒక <div> మూలకంలో ఉన్న <p> మూలకంలో ఉన్నప్పుడు, వినియోగదారుడు ఈ <p> మూలకాన్ని క్లిక్ చేసినప్పుడు, ఏ మూలకం యొక్క "క్లిక్" ఇవెంట్ను మొదటగా నిర్వహించాలి?

ప్రసారంలో, అత్యంత అంతర్గత మూలకం యొక్క ఇవెంట్లు మొదటగా నిర్వహించబడతాయి, కానీ అత్యంత బాహ్య మూలకం యొక్క ఇవెంట్లు తరువాత నిర్వహించబడతాయి: మొదట <p> మూలకం యొక్క క్లిక్ ఇవెంట్ని నిర్వహించడమైనప్పుడు, తరువాత <div> మూలకం యొక్క క్లిక్ ఇవెంట్ని నిర్వహించడమైనప్పుడు.

పరిశీలనలో, అత్యంత బాహ్య మూలకం యొక్క ఇవెంట్లు మొదటగా నిర్వహించబడతాయి, కానీ అత్యంత అంతర్గత మూలకం యొక్క ఇవెంట్లు తరువాత నిర్వహించబడతాయి: మొదట <div> మూలకం యొక్క క్లిక్ ఇవెంట్ని నిర్వహించడమైనప్పుడు, తరువాత <p> మూలకం యొక్క క్లిక్ ఇవెంట్ని నిర్వహించడమైనప్పుడు.

addEventListener() పద్ధతిలో, మీరు "useCapture" పారామితిని ఉపయోగించి ప్రసార రకాన్ని నిర్ణయించవచ్చు:

addEventListener(ఇవెంట్, ఫంక్షన్, useCapture);

అప్రమేయ విలువ ఉంది falseఉపయోగించబడుతుంది, ఈ విలువను సెట్ చేసినప్పుడు trueఅయితే, ఈ విధంగా ఇవెంట్ ఉపయోగించబడుతుంది.

ఇన్స్టాన్స్

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

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

removeEventListener() పద్ధతి

removeEventListener() ఈ పద్ధతి ద్వారా ప్రదర్శించబడిన addEventListener() పద్ధతికి జతచేసిన ఇవెంట్ హాండ్లర్స్:

ఇన్స్టాన్స్

ఎలిమెంట్.removeEventListener("mousemove", myFunction());

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

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

పట్టికలోని సంఖ్యలు ఈ పద్ధతులను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ని నిర్ణయిస్తాయి.

పద్ధతి
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

పరిశీలన:IE 8, Opera 6.0 మరియు దాని ముంది వెర్షన్లు ఈ పద్ధతులను మద్దతు చేయవు addEventListener() మరియు removeEventListener() పద్ధతి. అయితే, ఈ ప్రత్యేక బ్రౌజర్ వెర్షన్లకు మీరు ఉపయోగించవచ్చు attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() మార్గదర్శకం తొలగించండి:

ఎలిమెంట్.attachEvent(ఇవెంట్, ఫంక్షన్);
ఎలిమెంట్.detachEvent(ఇవెంట్, ఫంక్షన్);

ఇన్స్టాన్స్

కాక్స్ బ్రౌజర్ పరిష్కారం

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // ప్రధాన బ్రౌజర్లకు, IE 8 మరియు అంతకు ముంది వర్గాలకు తప్ప
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 మరియు అంతకు ముంది వర్గాలకు
    x.attachEvent("onclick", myFunction);
}

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

హెచ్ఎంఎల్ డామిన్ ఇవెంట్ ఆబ్జెక్ట్ రిఫరెన్స్ మ్యాన్యువల్

అన్ని హెచ్ఎంఎల్ డామిన్ ఇవెంట్స్ జాబితా కొరకు మా పూర్తి ప్రాప్యతలో సందర్శించండి హెచ్ఎంఎల్ డామిన్ ఇవెంట్ ఆబ్జెక్ట్ రిఫరెన్స్ మ్యాన్యువల్.