जावास्क्रिप्ट में ईवेंट डेलीगेशन

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

जैसा कि आप पहले से ही जानते हैं, li पर क्लिक करने पर, हम एक साथ ul पर भी क्लिक करते हैं। यह ईवेंट बबलिंग के कारण संभव है। हम इसका उपयोग अपने कार्य को हल करने के लिए कर सकते हैं: प्रत्येक li पर ईवेंट लगाने के बजाय, उनके पैरेंट ul पर ईवेंट लगाएं:

list.addEventListener('click', function() {
	
});

अब ईवेंट हैंडलर में this उस एलिमेंट की ओर इशारा करेगा जिससे हैंडलर जुड़ा हुआ है, और event.target - उस एलिमेंट की ओर इशारा करेगा, जहां ईवेंट हुआ था:

list.addEventListener('click', function(event) {
	console.log(this);         // हमारी सूची
	console.log(event.target); // सूची आइटम
});

आइए ऐसा करें कि li, जिस पर क्लिक हुआ था, उसके अंत में एक विस्मयादिबोधक चिह्न जोड़ दिया जाए:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

दिए गए समाधान को दोहराएं। सुनिश्चित करें कि नए li भी क्लिक पर प्रतिक्रिया देंगे।