जावास्क्रिप्ट में लूप में हैंडलर जोड़ना

आइए अब सीखते हैं कि कैसे तत्वों को बड़े पैमाने पर इवेंट हैंडलर जोड़ें। उदाहरण के लिए, मान लीजिए कि हमारे पास पैराग्राफ हैं:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

मान लीजिए कि हमारे पास एक फ़ंक्शन भी है:

javascriptfunction func() {
  console.log('!');
}

आइए हम अपने पैराग्राफ को लूप में पुनरावृत्त करें और प्रत्येक पैराग्राफ को क्लिक हैंडलर के रूप में फ़ंक्शन func जोड़ें:

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.addEventListener('click', func);
}

आइए आगे बढ़ते हैं और ऐसा करते हैं कि किसी भी पैराग्राफ पर क्लिक करने पर उस पैराग्राफ का टेक्स्ट प्रदर्शित हो। हालाँकि, एक समस्या है: पैराग्राफ कई हैं, लेकिन फ़ंक्शन-हैंडलर एक है। फ़ंक्शन-हैंडलर के अंदर हम अपने पैराग्राफ को कैसे अलग करें?

इसमें ऑब्जेक्ट this हमारी मदद करेगा - इवेंट के समय फ़ंक्शन को कॉल करने पर यह ऑब्जेक्ट उस तत्व की ओर इशारा करेगा, जहाँ यह इवेंट हुआ था। आइए func के हमारे कोड को कही गई बातों के अनुसार बदलें:

javascriptfunction func() {
  console.log(this.textContent); // पैराग्राफ का टेक्स्ट प्रदर्शित करते हैं
}

javascriptfunction func() {
  this.value = Number(this.value) + 1;
}