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

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

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

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

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

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

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

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

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

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

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

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