addEventListener — CodingCreativo

In questa lezione studieremo il metodo addEventListener di JavaScript.

Dobbiamo premettere che questo metodo non è supportato dalla versione 8 di Internet Explorer e precedenti e dalla versione 6.0 di Opera e precedenti.

La sintassi è la seguente:

document.addEventListener(event, function, useCapture)

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

Dove event, obbligatorio, è una stringa che specifica il nome dell'evento, ad esempio mouseover, load, click.

function, obbligatorio, specifica la funzione che deve essere richiamata.

Infine useCapture, non obbligatorio, può assumere il valore di true o false e serve a 'forzare' la priorità di gestione di un certo evento se sono più di uno. Per default è impostato a false.

Esempio d'uso di addEventListener

Al clic del mouse in un punto qualsiasi della pagina comparià il testo Coding Creativo in rosso.

Clicca qui

Per realizzare questo semplice esempio basta inserire un paragrafo dove indico l'id code. Dopo implementiamo la funzione testo che servirà a far apparire il testo Coding Creativo nel paragrafo specificato dall'id.

Quindi all'evento click, cioè quando faremo click nella pagina, associamo la funzione testo.

<p id="code" style="color: #ff0000">Clicca qui</p>

<script type="text/javascript">
  // Aggiungiamo un listener per l'evento mousemove sull'intero documento
  document.addEventListener("mousemove", testo);

  // Funzione che cambia il testo del paragrafo
  function testo() {
    const elemento = document.getElementById("code");

    // Modifica il contenuto del paragrafo
    elemento.innerHTML = "Coding Creativo";
  }
</script>

Chiaramente si poteva associare ad altri eventi ad esempio mouseover, mousemove , ecc.

Secondo esempio d'uso di addEventListener

Se fate la prova ad avvicinare il mouse dove compare il numero in rosso, vi accorgerete che il numero quando passiamo sopra cambia.

Per generare questo esempio basta creare un paragrafo con un id specifico, ad esempio lo chiamo numero.

Dopo creo la funzione in JavaScript che al clic del mouse genera un numero casuale da 1 a 10. Utilizzo per questo scopo le funzioni matematiche Math.round e Math.random precedentemente spiegate: tutorial funzione casuale.

<p id="numero" style="color: #ff0000">Passa il mouse qui!</p>

<script type="text/javascript">
  // Aggiungiamo un listener per l'evento mouseover sul documento
  document.addEventListener("mouseover", casuale);

  // Funzione per generare un numero casuale da 1 a 11
  function casuale() {
    const numero = document.getElementById("numero");

    // Generiamo un numero casuale intero tra 1 e 11
    const valoreCasuale = Math.round(Math.random() * 10 + 1);

    // Inseriamo il numero generato nel paragrafo
    numero.innerHTML = valoreCasuale;
  }
</script>

Chiaramente questi sono solo dei semplici esempi sul metodo addEventListener, nella prossima lezione parleremo anche di altri metodi.

Lezione precedente: introduzione a JavaScript getElementById

Lezione successiva: metodo addEventListener