जावास्क्रिप्ट में तत्वों को इवेंट हैंडलर्स बांधना
आइए अब अपने DOM तत्वों को साइट उपयोगकर्ता की क्रियाओं पर प्रतिक्रिया देने के लिए सिखाएं। उदाहरण के लिए, उपयोगकर्ता कहीं भी माउस से क्लिक करेगा, और हमारा कोड जवाब में उस क्लिक को संसाधित करेगा और स्क्रीन पर कुछ जानकारी प्रदर्शित करेगा।
उपयोगकर्ता की वे क्रियाएं, जिन्हें हम जावास्क्रिप्ट के माध्यम से ट्रैक कर सकते हैं, उन्हें इवेंट्स कहा जाता है। इवेंट निम्नलिखित प्रकार के हो सकते हैं: पेज के तत्व पर माउस से क्लिक करना, तत्व पर माउस ले जाना या इसके विपरीत - तत्व से माउस कर्सर का हटना और इसी तरह। इसके अलावा, कुछ इवेंट ऐसे भी होते हैं जो उपयोगकर्ता की क्रियाओं पर निर्भर नहीं करते, उदाहरण के लिए, ब्राउज़र में HTML पेज लोड होने का इवेंट।
आइए उदाहरण के लिए एक बटन बनाएं, जिसे क्लिक करने पर स्क्रीन पर कुछ टेक्स्ट दिखाई दे। सबसे पहले बटन का HTML कोड बनाते हैं:
<input id="button" type="submit">
अब बटन का रेफरेंस एक वेरिएबल में प्राप्त करते हैं:
let button = document.querySelector('#button');
अब हमें अपने बटन पर क्लिक होने पर इसकी प्रतिक्रिया निर्धारित करनी है।
इसके लिए जावास्क्रिप्ट में
एक विशेष मेथड addEventListener है,
जो पहले पैरामीटर के रूप में इवेंट का नाम लेता है
(बटन पर क्लिक का नाम 'click' है),
और दूसरे पैरामीटर के रूप में - फंक्शन-कॉलबैक,
जो उस इवेंट के होने पर एक्ज़ीक्यूट होती है।
आइए, उदाहरण के लिए, बटन पर क्लिक करने पर कुछ टेक्स्ट प्रदर्शित करें:
button.addEventListener('click', function() {
console.log('!!!');
});
3 बटन दिए गए हैं:
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
ऐसा करें कि पहले बटन पर क्लिक करने पर
स्क्रीन पर नंबर 1 दिखाई दे,
दूसरे बटन पर क्लिक करने पर - नंबर 2,
और तीसरे बटन पर क्लिक करने पर - नंबर 3 दिखाई दे।
