HTML DOM Document addEventListener() विधि

वर्णन और उपयोग

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 - प्रोसेसर बबलिंग चरण में चलाया जाता है

वापसी मूल्य

नहीं है।

तकनीकी विवरण

यह विधि निर्दिष्ट इवेंट लिस्टनर फ़ंक्शन को वर्तमान नोड के लिस्टनर समझौते में जोड़ती है, जो निर्दिष्ट type के इवेंट को संस्करण करती है। यदि capture ट्रू लागू है, तो इसे इवेंट कैप्चर लिस्टनर के रूप में रजिस्टर किया जाता है। यदि capture फॉल्स थ्रू लागू है, तो इसे सामान्य इवेंट लिस्टनर के रूप में रजिस्टर किया जाता है。

addEventListener() बार-बार बुलाया जा सकता है, एक ही नोड पर एक ही तरह के इवेंट के लिए कई इवेंट हैंडलर रजिस्टर किए जा सकते हैं। लेकिन ध्यान दें कि DOM कभी भी कई इवेंट हैंडलरों को बुलाए जाने की क्रमिक तर्कबद्धता नहीं निर्धारित कर सकता है。

यदि एक इवेंट लिस्टनर फ़ंक्शन उसी नोड पर एक ही type और capture पारामीटर दोहरी बार रजिस्टर किया गया है, तो दूसरी रजिस्टर को अनदेखा कर दिया जाता है। यदि एक नोड पर इवेंट को संस्करण करते समय उसी नोड पर नए इवेंट लिस्टनर को पंजीकृत किया जाता है, तो उस इवेंट के लिए नए इवेंट लिस्टनर को नहीं बुलाया जाता।

जब Node.cloneNode() विधि या Document.importNode() जब एक दस्तावेज़ नोड की नकल बनाई जाती है, तो उसके लिए पंजीकृत इवेंट लिस्टनर नहीं बनाई जाती है。

यह विधि दस्तावेज़ और विंडो ऑब्जैक्टों पर भी परिभाषित है और उसी प्रकार काम करती है。

ब्राउज़र समर्थन

document.addEventListener यह DOM Level 2 (2001) विशेषता है。

सभी ब्राउज़र इसे पूरी तरह से समर्थित करते हैं:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
समर्थन 9-11 समर्थन समर्थन समर्थन समर्थन

संबंधित पृष्ठ

एलिमेंट विधि

addEventListener() विधि

removeEventListener() विधि

दस्तावेज़ विधि

addEventListener() विधि

removeEventListener() विधि

शिक्षा

HTML DOM EventListener

पूर्ण DOM इवेंट सूची