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

अब मान लीजिए कि हमारे पास एक तत्व नहीं है, बल्कि कई हैं। उदाहरण के लिए, कई पैराग्राफ:

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

आइए इनमें से प्रत्येक पैराग्राफ में क्लिक हैंडलर के माध्यम से फ़ंक्शन func को बांधें:

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

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

function func() {
  console.log(this.textContent);
}

अब कोड को इस तरह से बदलते हैं कि प्रत्येक पैराग्राफ केवल अपने पहले क्लिक पर ही प्रतिक्रिया करे। इसके लिए, पैराग्राफ पर क्लिक करने पर हम उससे बंधे हुए हैंडलर को अनबाइंड कर देंगे। साथ ही, अनबाइंडिंग विशेष रूप से इसी पैराग्राफ से होगी, बाकियों को किसी भी तरह से प्रभावित नहीं करेगी।

जैसा कि आप पहले से ही जानते हैं, वह तत्व जिसमें इवेंट हुआ है, उसे हैंडलर फ़ंक्शन में this के माध्यम से प्राप्त किया जा सकता है। इसका मतलब है कि this से हैंडलर को अनबाइंड करने की आवश्यकता है, इस तरह:

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

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

function func() {
  console.log(this.textContent);
  this.removeEventListener('click', func); // हैंडलर को अनबाइंड कर रहे हैं
}