Sveltejs Academy · पाठ

on:click on:input on:submit

Svelte टेम्पलेट सिंटैक्स में सीधे DOM इवेंट लिसनर जोड़ें।

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

on:click on:input on:submit, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

इवेंट निर्देश

लिसनर जोड़ने के लिए on: के बाद DOM इवेंट का नाम लिखें।

<button on:click={handleClick}>Click</button>

इनलाइन हैंडलर

इनलाइन तर्क के लिए एरो फ़ंक्शन भेजें।

<button on:click={() => count++}>+</button>

नामित हैंडलर

स्क्रिप्ट में फ़ंक्शन परिभाषित करें और उसे नाम से संदर्भित करें।

<script>
  function save() { /* ... */ }
</script>

<button on:click={save}>Save</button>

इवेंट ऑब्जेक्ट प्राप्त करना

हैंडलर को अपने तर्क के रूप में मूल Event प्राप्त होता है।

function onChange(e) { value = e.target.value; }

on:input

जब भी उपयोगकर्ता टेक्स्ट फ़ील्ड में टाइप करता है, input इवेंट सक्रिय होता है।

<input on:input={(e) => text = e.target.value} />

on:submit

सबमिशन संभालने के लिए इसे <form> पर लगाएँ। डिफ़ॉल्ट व्यवहार रोकने के लिए संशोधक का उपयोग करें।

<form on:submit|preventDefault={save}>...</form>

on:keydown

इनपुट पर या पूरे दस्तावेज़ में कीबोर्ड इवेंट सुनें।

<input on:keydown={(e) => e.key === "Enter" && submit()} />

on:change बनाम on:input

जब उपयोगकर्ता संपादन पूरा करता है, तब change इवेंट सक्रिय होता है; input हर कीस्ट्रोक पर सक्रिय होता है।

माउस घटनाएँ

सभी मानक DOM माउस घटनाएँ काम करती हैं: mouseenter, mouseleave, mousemove।

स्पर्श घटनाएँ

touchstart जैसी मोबाइल स्पर्श घटनाएँ भी इसी तरह समर्थित हैं।

<div on:touchstart={start} on:touchend={end}>

एकाधिक श्रोता

आप अलग-अलग घटनाओं के लिए एक ही तत्व पर कई on: निर्देश जोड़ सकते हैं।

<button on:click={a} on:focus={b}>...</button>

त्वरित जाँच

क्लिक घटना-प्रबंधक जोड़ने के लिए किस वाक्यविन्यास का उपयोग किया जाता है?

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

पुनरावलोकन

किसी भी DOM घटना के लिए on:event निर्देशों का उपयोग करें। प्रबंधक सीधे लिखा हुआ या नामित फ़ंक्शन हो सकता है और उसे घटना प्राप्त होती है।

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

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

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

पाठ्यक्रम: 41
पाठ: 163

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

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

क्या “on:click on:input on:submit” पाठ निःशुल्क है?

हाँ—“on:click on:input on:submit” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“on:click on:input on:submit” में मैं क्या सीखूँगा?

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

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

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

“on:click on:input on:submit” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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