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, function, useCapture)
पारामीटर
| पारामीटर | वर्णन |
|---|---|
| type |
आवश्यक। घटना का नाम। कृपया "on" पूर्व-संयोजक का उपयोग न करें। कृपया "click" का उपयोग करें न कि "onclick"। |
| function | आवश्यक। घटना के समय चलने वाली फ़ंक्शन। |
| useCapture |
वैकल्पिक (डिफ़ॉल्ट = false)।
|
परिणाम
नहीं है।
तकनीकी विवरण
इस विधि निर्दिष्ट घटनाकारक फ़ंक्शन को वर्तमान नोड के अवलोकनकर्ता समझौते में जोड़ देगी, ताकि निर्दिष्ट घटनाकारक को संसाधित कर सके。 type के लिए घटना useCapture ट्रू होने पर, अवलोकनकर्ता एक पक्षभूमि घटनाकारक अवलोकनकर्ता के रूप में पंजीकृत है। यदि useCapture फॉल्स बनाया गया है, तो यह एक सामान्य घटनाकारक अवलोकनकर्ता के रूप में पंजीकृत है।
addEventListener() बार-बार बुलाया जा सकता है, एक ही नोड पर एक ही तरह के घटनाओं के लिए कई घटनाकारक हैं। लेकिन ध्यान दें कि DOM को कई घटनाकारक हैं जो बुलाए जाएंगे की गणना नहीं करता है。
यदि एक घटनाकारक अवलोकनकर्ता फ़ंक्शन एक ही नोड पर एक ही तरह के type और useCapture पारामीटर दोहरी बार रजिस्टर किया गया है, तो दूसरी रजिस्टरिंग नज़र नहीं आएगी। यदि आप एक नोड पर घटना का संसाधन कर रहे हैं और उसी नोड पर एक नया घटनाकारक अवलोकनकर्ता रजिस्टर करते हैं, तो उस घटना के लिए नए घटनाकारक अवलोकनकर्ता को नहीं बुलाया जाएगा。
जब Node.cloneNode() विधि या Document.importNode() जब Document नोड की प्रतिलिपि बनाई जाती है, तो उस प्रतिलिपि में आरंभिक नोड पर पंजीकृत घटनाकारक अवलोकनकर्ता नहीं बनाए जाते。
यह विधि भी Document और Window ऑब्जेक्ट पर परिभाषित है और उसी तरह काम करता है。
और अधिक उदाहरण
उदाहरण 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 ऑब्जेक्ट
