oggetto event

**lanvoel** · 02-03-2021, 13:42

Sto rivedendo alcuni concetti di JavaScript sulle lezioni <html>.it; nella lezione 70 intitolata "L'oggetto event e this" è riportato questo esempio:

codice:

<!doctype html>
<html>
<body>
<input type="button" id="btn1" value="bottone1"><br>
<input type="button" id="btn2" value="bottone2"><br>
<input type="button" id="btn3" value="bottone3"><br>
<input type="button" id="btn4" value="bottone4"><br>
<script>
var buttons = document.getElementsByTagName("button");
var handler = function(e) { console.log("Clic su " + e.target.innerHTML); };
for(var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener("click", handler);
}
</script>
</body>
</html>

dove si assegna un unico gestore di evento click a tutti i pulsanti della pagina e si vuole sapere quale pulsante è stato cliccato. Al gestore di evento viene passato come parametro l'oggetto event e viene usata la proprietà target.
Non capisco perché il programma, una volta lanciato, non evidenzia il pulsante cliccato, anche se non viene rilevato nessun errore e nessun problema.
Desidererei sapere, se possibile, perchè. Grazie

lanvoel

**ninja72** · 02-03-2021, 14:23

innerHTML non è appropriata in questo contesto:

codice:

<!doctype html>
<html lang="en">

<head>
    <title>test</title>
</head>

<body>
    <input type="button" class="btn" value="bottone1"><br>
    <input type="button" class="btn" value="bottone2"><br>
    <input type="button" class="btn" value="bottone3"><br>
    <input type="button" class="btn" value="bottone4"><br>

    <script>
        const buttons = document.getElementsByClassName("btn");
        const handler = e => { console.log("Clic su " + e.target.value) };
        
    // "for ... of" method
        // for (button of buttons) {
        //     button.addEventListener("click", handler);
        // }
        
    // "forEach" method
        Array.from(buttons).forEach(e => {
            e.addEventListener("click", handler);
        })
    </script>
</body>

</html>

**lanvoel** · 02-03-2021, 15:02

Grazie ninja72, anche per la tempestività

lanvoel

Discussione: oggetto event

Strumenti discussione

Ricerca discussione

Visualizza

oggetto event

Permessi di invio