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

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

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

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

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

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

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

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

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

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

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

एक लिंक और एक बटन दिया गया है। बटन दबाने पर, लिंक के टेक्स्ट के अंत में उसके href एट्रिब्यूट की सामग्री को गोल कोष्ठक में जोड़ें। ऐसा करें कि यह जोड़ केवल पहली बार दबाने पर ही हो।

एक बटन दिया गया है, जिसका मान संख्या 1 है। ऐसा करें कि इस बटन पर क्लिक करने पर इसका मान हर बार एक से बढ़ जाए। जब बटन का मान 10 तक पहुँच जाए - तो ईवेंट हैंडलर को अनबाइंड कर दें, ताकि बटन अब दबाने पर प्रतिक्रिया न करे।