जावास्क्रिप्ट में ईवेंट अनबाइंडिंग

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

html<input id="button" type="submit">

आइए इस बटन से func फ़ंक्शन को बाइंड करें:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

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

आइए अब ऐसा करें कि ईवेंट हैंडलर पहले क्लिक पर ट्रिगर हो, और उसके बाद बटन से अनबाइंड हो जाए। इसके लिए एक विशेष विधि removeEventListener होती है। यह विधि पहले पैरामीटर के रूप में ईवेंट का प्रकार लेती है, और दूसरे पैरामीटर के रूप में उस फ़ंक्शन का रेफरेंस लेती है जिसे अनबाइंड करना है।

आमतौर पर, इसका मतलब है कि ईवेंट हैंडलर उसी तरह अनबाइंड होता है, जैसे उसे बाइंड किया गया था। यानी, अगर हमने इसे इस तरह बाइंड किया था: addEventListener('click', func), तो उसे उन्हीं पैरामीटर्स के साथ अनबाइंड करेंगे, इस तरह: removeEventListener('click', func)।

तो, आइए हमारे द्वारा तय किए गए कार्य को हल करें:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}