Προσθήκη χειριστών σε βρόχο σε JavaScript

Ας μάθουμε τώρα να προσθέτουμε μαζικά χειριστές συμβάντων σε στοιχεία. Ας υποθέσουμε, για παράδειγμα, ότι έχουμε παραγράφους:

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

Ας υποθέσουμε ότι έχουμε επίσης μια συνάρτηση:

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

Ας διατρέξουμε τους παραγράφους μας σε βρόχο και σε κάθε παράγραφο να προσθέσουμε ως χειριστή κλικ τη συνάρτηση func:

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

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

Ας προχωρήσουμε περισσότερο και ας κάνουμε έτσι ώστε με κλικ σε οποιονδήποτε παράγραφο να εμφανίζεται το κείμενο αυτής της παραγράφου. Υπάρχει, ωστόσο, ένα πρόβλημα: οι παράγραφοι είναι πολλοί, αλλά η συνάρτηση-χειριστής είναι μία. Πώς μπορούμε να διακρίνουμε τους παραγράφους μας μέσα στη συνάρτηση-χειριστή;

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

function func() {
	console.log(this.textContent); // εμφανίζουμε το κείμενο της παραγράφου
}

Δίνεται η ακόλουθη συνάρτηση:

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

Δίνονται επίσης πεδία εισόδου. Κάντε έτσι ώστε με απώλεια εστίασης σε οποιοδήποτε από τα πεδία εισόδου μας να εκτελείται η παραπάνω συνάρτηση.

Δίνονται παράγραφοι με αριθμούς. Κάντε έτσι ώστε με κλικ σε οποιονδήποτε παράγραφο ο αριθμός σε αυτόν να υψώνεται στο τετράγωνο.