addEventListener, creare un evento al click nella pagina

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)

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">
document.addEventListener("mousemove", testo);
function testo() {
  document.getElementById("code").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"></p>
<script type="text/javascript">
document.addEventListener("mouseover", casuale);
function casuale() {
 document.getElementById("numero").innerHTML=Math.round(Math.random()*10+1);
}
</script>

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