जावास्क्रिप्ट एचटीएमएल डोम इवेंट लिस्टनर
AddEventListener () विधि
उदाहरण
एक ईवेंट श्रोता जोड़ें जो तब सक्रिय होता है जब कोई उपयोगकर्ता किसी बटन पर क्लिक करता है:
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener()विधि एक ईवेंट हैंडलर को निर्दिष्ट तत्व से जोड़ती है ।
यह addEventListener()विधि किसी ईवेंट हैंडलर को मौजूदा ईवेंट हैंडलर को अधिलेखित किए बिना किसी तत्व से जोड़ती है।
आप एक तत्व में कई ईवेंट हैंडलर जोड़ सकते हैं।
आप एक ही प्रकार के कई ईवेंट हैंडलर को एक तत्व में जोड़ सकते हैं, यानी दो "क्लिक" ईवेंट।
आप ईवेंट श्रोताओं को किसी भी DOM ऑब्जेक्ट में न केवल HTML तत्वों में जोड़ सकते हैं। यानी विंडो ऑब्जेक्ट।
इस addEventListener()विधि से यह नियंत्रित करना आसान हो जाता है कि घटना बुदबुदाहट पर कैसे प्रतिक्रिया करती है।
विधि का उपयोग करते समय addEventListener(), जावास्क्रिप्ट को बेहतर पठनीयता के लिए HTML मार्कअप से अलग किया जाता है और जब आप HTML मार्कअप को नियंत्रित नहीं करते हैं तब भी आपको ईवेंट श्रोताओं को जोड़ने की अनुमति देता है।
removeEventListener()आप विधि का उपयोग करके किसी ईवेंट श्रोता को आसानी से हटा सकते हैं ।
वाक्य - विन्यास
element.addEventListener(event, function, useCapture);
पहला पैरामीटर ईवेंट का प्रकार है (जैसे " click" या " mousedown" या कोई अन्य HTML DOM ईवेंट .)
दूसरा पैरामीटर वह फ़ंक्शन है जिसे हम ईवेंट होने पर कॉल करना चाहते हैं।
तीसरा पैरामीटर एक बूलियन मान है जो निर्दिष्ट करता है कि ईवेंट बबलिंग या ईवेंट कैप्चरिंग का उपयोग करना है या नहीं। यह पैरामीटर वैकल्पिक है।
ध्यान दें कि आप ईवेंट के लिए "चालू" उपसर्ग का उपयोग नहीं करते हैं; " click" के बजाय "" का प्रयोग करें onclick।
किसी तत्व में इवेंट हैंडलर जोड़ें
उदाहरण
चेतावनी "हैलो वर्ल्ड!" जब उपयोगकर्ता किसी तत्व पर क्लिक करता है:
element.addEventListener("click", function(){ alert("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);
विंडो ऑब्जेक्ट में इवेंट हैंडलर जोड़ें
यह addEventListener()विधि आपको किसी भी HTML DOM ऑब्जेक्ट पर ईवेंट श्रोताओं को जोड़ने की अनुमति देती है जैसे कि HTML तत्व, HTML दस्तावेज़, विंडो ऑब्जेक्ट, या अन्य ऑब्जेक्ट जो ईवेंट का समर्थन करते हैं, जैसे xmlHttpRequestऑब्जेक्ट।
उदाहरण
एक ईवेंट श्रोता जोड़ें जो उपयोगकर्ता द्वारा विंडो का आकार बदलने पर सक्रिय हो जाता है:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
पासिंग पैरामीटर्स
पैरामीटर मान पास करते समय, "अनाम फ़ंक्शन" का उपयोग करें जो निर्दिष्ट फ़ंक्शन को पैरामीटर के साथ कॉल करता है:
उदाहरण
element.addEventListener("click", function(){ myFunction(p1, p2); });
इवेंट बबलिंग या इवेंट कैप्चरिंग?
HTML DOM में ईवेंट प्रोपेगेशन के दो तरीके हैं, बबलिंग और कैप्चरिंग।
घटना प्रचार एक घटना होने पर तत्व क्रम को परिभाषित करने का एक तरीका है। यदि आपके पास <p> तत्व के अंदर <div> तत्व है, और उपयोगकर्ता <p> तत्व पर क्लिक करता है, तो किस तत्व की "क्लिक" घटना को पहले संभाला जाना चाहिए?
बबलिंग में सबसे आंतरिक तत्व की घटना को पहले संभाला जाता है और फिर बाहरी: <p> तत्व के क्लिक ईवेंट को पहले संभाला जाता है, फिर <div> तत्व का क्लिक ईवेंट।
सबसे बाहरी तत्व की घटना को कैप्चर करने में पहले और फिर आंतरिक: <div> तत्व की क्लिक घटना को पहले संभाला जाएगा, फिर <p> तत्व की क्लिक घटना को संभाला जाएगा।
AddEventListener() विधि के साथ आप "useCapture" पैरामीटर का उपयोग करके प्रचार प्रकार निर्दिष्ट कर सकते हैं:
addEventListener(event, function, useCapture);
डिफ़ॉल्ट मान गलत है, जो बबलिंग प्रचार का उपयोग करेगा, जब मान सत्य पर सेट होता है, तो ईवेंट कैप्चरिंग प्रचार का उपयोग करता है।
उदाहरण
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
रिमूवइवेंट लिस्टनर () विधि
विधि उन removeEventListener()ईवेंट हैंडलर्स को हटा देती है जिन्हें addEventListener() विधि से जोड़ा गया है:
उदाहरण
element.removeEventListener("mousemove", myFunction);
एचटीएमएल डोम घटना वस्तु संदर्भ
सभी HTML DOM ईवेंट की सूची के लिए, हमारा संपूर्ण HTML DOM ईवेंट ऑब्जेक्ट संदर्भ देखें ।