JavaScript Academy · पाठ

addEventListener की मूल बातें

इवेंट के लिए तत्वों से हैंडलर जोड़िए।

पाठ 1, कुल 4 में से13 चरण

addEventListener की मूल बातें, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

इवेंट पर प्रतिक्रिया देना

इवेंट आपके कोड को क्लिक, कुंजी दबाने और फ़ॉर्म सबमिट करने जैसी उपयोगकर्ता कार्रवाइयों पर प्रतिक्रिया करने देते हैं। सदस्यता लेने का मानक तरीका addEventListener है।

मूल सिंटैक्स

addEventListener को इवेंट नाम और हैंडलर फ़ंक्शन के साथ कॉल कीजिए। इवेंट होने पर हर बार हैंडलर चलता है।

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

नामित हैंडलर

आप किसी नामित फ़ंक्शन को पास कर सकते हैं। इससे कोड व्यवस्थित रहता है और सबसे महत्वपूर्ण बात यह है कि आप बाद में श्रोता को हटा सकते हैं।

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

कई श्रोता

पुरानी onclick प्रॉपर्टी के विपरीत, आप एक-दूसरे को अधिलेखित किए बिना एक ही इवेंट के लिए कई श्रोता जोड़ सकते हैं।

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

सुनना बंद करने के लिए, removeEventListener को वही इवेंट नाम और फ़ंक्शन संदर्भ देकर कॉल कीजिए, जिनका उपयोग उसे जोड़ते समय किया था।

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

अनाम फ़ंक्शन हटाए नहीं जा सकते

इनलाइन ऐरो फ़ंक्शन हर बार एक नया संदर्भ बनाता है, इसलिए उसे बाद में हटाया नहीं जा सकता। यदि हटाने की आवश्यकता हो, तो नामित संदर्भ का उपयोग कीजिए।

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

once विकल्प

{ once: true } पास करने पर श्रोता एक बार सक्रिय होने के बाद अपने आप हट जाता है।

btn.addEventListener("click", init, { once: true });

capture विकल्प

डिफ़ॉल्ट रूप से श्रोता बबलिंग चरण के दौरान चलते हैं। { capture: true } उन्हें इसके बजाय कैप्चरिंग चरण में चलाता है।

parent.addEventListener("click", handler, { capture: true });

passive विकल्प

{ passive: true } यह वादा करता है कि आप preventDefault को कॉल नहीं करेंगे, जिससे ब्राउज़र स्क्रॉलिंग के प्रदर्शन को बेहतर बना सकता है।

window.addEventListener("scroll", onScroll, { passive: true });

signal विकल्प

AbortController का सिग्नल abort करके किसी एक या कई श्रोताओं को हटाने देता है, जो सफ़ाई के काम के लिए उपयोगी है।

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

हैंडलर के अंदर this

नियमित फ़ंक्शन हैंडलर में this उस तत्व को संदर्भित करता है, जिससे श्रोता जुड़ा है। ऐरो फ़ंक्शन this को नए संदर्भ से नहीं जोड़ते।

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

त्वरित जाँच

हटाने के नियमों की जाँच कीजिए।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

addEventListener(type, handler, options) इवेंट की सदस्यता लेता है और कई श्रोताओं का समर्थन करता है। उन्हें हटाने के लिए उसी संदर्भ के साथ removeEventListener का उपयोग कीजिए, इसलिए नामित फ़ंक्शन को प्राथमिकता दीजिए। उपयोगी विकल्पों में once, capture, passive और signal शामिल हैं। नियमित हैंडलर में this लक्षित तत्व होता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 59
पाठ: 200

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “addEventListener की मूल बातें” पाठ निःशुल्क है?

हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “addEventListener की मूल बातें” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“addEventListener की मूल बातें” में मैं क्या सीखूँगा?

इवेंट के लिए तत्वों से हैंडलर जोड़िए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“addEventListener की मूल बातें” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← JavaScript Academy पर वापस जाएँ