Αποδέσμευση Γεγονότων σε JavaScript

Σε αυτό το μάθημα θα μάθουμε πώς να αποδεσμεύουμε χειριστές γεγονότων, που είχαν προηγουμένως δεσμευτεί από εμάς σε στοιχεία. Ας υποθέσουμε για παράδειγμα ότι υπάρχει το ακόλουθο κουμπί:

<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 - αποδεσμεύστε τον χειριστή γεγονότων, ώστε το κουμπί να μην αντιδρά πλέον στο πάτημα.