जावास्क्रिप्ट एचटीएमएल डॉम इवेंट लिस्टनर

addEventListener() विधि

इंस्टांस

बटन पर उपयोगकर्ता क्लिक करने पर ट्रिगर होने वाले इवेंट लिस्टनर जोड़ें:

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

स्वयं प्रयोग करें

addEventListener() यह विधि निर्दिष्ट एलीमेंट के लिए निर्दिष्ट इवेंट हैंडलर जोड़ती है。

addEventListener() यह विधि एलीमेंट को इवेंट हैंडलर जोड़ती है और मौजूदा इवेंट हैंडलर को नहीं ओवरराइड करती。

आप एक एलीमेंट को कई इवेंट हैंडलर जोड़ सकते हैं。

आप एक एलिमेंट पर कई समान प्रकार के इवेंट हैंडलर जोड़ सकते हैं, जैसे दो आरेखांकन "click" इवेंट.

आप इवेंट हैंडलर को किसी भी DOM ऑब्जैक्ट पर जोड़ सकते हैं, न केवल HTML एलिमेंट, जैसे window ऑब्जैक्ट.

addEventListener() मथडल का उपयोग करते हैं, तो इवेंट को बुबलिंग के तरीके से कैसे कार्य करने का नियंत्रण करना आसान होता है。

जब addEventListener() मथडल का उपयोग करते हैं, तो JavaScript और HTML टैग अलग-अलग हैं, जिससे अधिक पठनीयता होती है; यह ऐसे समय भी इवेंट लिस्टनर जोड़ने की अनुमति देता है जब HTML टैग को नियंत्रित नहीं किया जाता है。

जब removeEventListener() यह मथडल इवेंट लिस्टनर को आसानी से हटाने में मदद करता है。

व्याकरण

element.addEventListener(event, function, useCapture);

पहला पारामीटर इवेंट का प्रकार है (जैसे "click" या "mousedown").

दूसरा पारामीटर वह फ़ंक्शन है जो इवेंट होने पर बुलाया जाएगा。

तीसरा पारामीटर बूल वैल्यू है, जो सूचित करता है कि इवेंट बुबलिंग या इवेंट कैप्चर का उपयोग करना है। यह पारामीटर वैकल्पिक है。

ध्यान:इवेंट के लिए "on" प्रीफिक्स का उपयोग न करें; "click" के स्थान पर "onclick" का उपयोग करें。

एलिमेंट को इवेंट हैंडलर जोड़ें

इंस्टांस

जब उपयोगकर्ता किसी एलिमेंट पर क्लिक करता है तो "Hello World!" संदेश दिखाएं:

element.addEventListener("click", function(){ alert("Hello World!"); });

स्वयं प्रयोग करें

आप अलगावी "नामक" फ़ंक्शन को भी उद्धृत कर सकते हैं:

इंस्टांस

जब उपयोगकर्ता किसी एलिमेंट पर क्लिक करता है तो "Hello World!" संदेश दिखाएं:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

स्वयं प्रयोग करें

एक ही एलिमेंट पर कई इवेंट हैंडलर जोड़ें

addEventListener() यह मथडल आपको एक ही एलिमेंट पर कई इवेंट जोड़ने की अनुमति देता है, बिना कि मौजूदा इवेंट को ओवरराइड करने के:

इंस्टांस

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

स्वयं प्रयोग करें

आप एक ही एलिमेंट पर विभिन्न प्रकार के इवेंट जोड़ सकते हैं:

इंस्टांस

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

स्वयं प्रयोग करें

Window ऑब्जैक्ट को इवेंट हैंडलर जोड़ें

addEventListener() इससे आप इवेंट लिस्टनर को किसी भी HTML DOM ऑब्जैक्ट पर जोड़ सकते हैं, जैसे HTML एलिमेंट, HTML ऑब्जैक्ट, window ऑब्जैक्ट या ऐसे किसी अन्य समर्थित इवेंट ऑब्जैक्ट, जैसे xmlHttpRequest ऑब्जैक्ट.

इंस्टांस

जब उपयोगकर्ता विंडो के आकार को संचालित करता है तो इसके लिए इवेंट लिस्टनर जोड़ें:

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

स्वयं प्रयोग करें

पारामीटर भेजना

पारामीटर मान देने पर, नामहीन फ़ंक्शन को पारामीटर के रूप में उपयोग करके फ़ंक्शन को बुला दें

इंस्टांस

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

स्वयं प्रयोग करें

इवेंट बुबलिंग है या इवेंट पकड़ाऊ?

HTML DOM में दो इवेंट प्रसार विधियां हैं: बुबलिंग और पकड़ाऊ。

इवेंट प्रसार एक विधि है जो इवेंट के समय एलिमेंट की क्रमिक गणना करता है।अगर <div> एलिमेंट के अंदर एक <p> है, और उपयोगकर्ता इस <p> एलिमेंट को क्लिक करता है, तो कौनसा एलिमेंट का "click" इवेंट पहले हैंडल किया जाना चाहिए?

बुबलिंग में, सबसे अंदर के एलिमेंट के इवेंट पहले हैं, फिर अधिक बाहर के: पहले <p> एलिमेंट के क्लिक इवेंट को हैंडल किया जाता है, फिर <div> एलिमेंट के क्लिक इवेंट को हैंडल किया जाता है。

पकड़ाऊ में, सबसे बाहरी एलिमेंट के इवेंट पहले हैं, फिर अधिक अंदर के: पहले <div> एलिमेंट के क्लिक इवेंट को हैंडल किया जाता है, फिर <p> एलिमेंट के क्लिक इवेंट को हैंडल किया जाता है。

addEventListener() विधि में, आप "useCapture" पारामीटर का उपयोग करके प्रसार प्रकार को निर्धारित कर सकते हैं:

addEventListener(event, function, useCapture);

मूल रूप से सेट किया गया है falseतो इवेंट का बुबलिंग प्रसार होगा, अगर इस को मूल रूप से सेट किया गया है trueतो इवेंट का पकड़ाऊ प्रसार होगा。

इंस्टांस

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

स्वयं प्रयोग करें

removeEventListener() विधि

removeEventListener() विधि इसे छोड़ देगी addEventListener() विधि से जुड़े इवेंट हैंडलर:

इंस्टांस

element.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() मेथड निष्क्रिय करना:

element.attachEvent(event, function);
element.detachEvent(event, function);

इंस्टांस

क्रॉस-ब्राउज़र समाधान:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // मुख्यभूमि ब्राउज़रों के लिए, IE 8 और पहले संस्करण को छोड़कर
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 और पहले संस्करण के लिए
    x.attachEvent("onclick", myFunction);
}

स्वयं प्रयोग करें

एचटीएमएल डॉम इवेंट ऑब्जेक्ट संदर्भ दस्तावेज

सभी एचटीएमएल डॉम इवेंट की सूची के लिए हमारे पूर्ण एचटीएमएल डॉम इवेंट ऑब्जेक्ट संदर्भ दस्तावेज.