addEventListener

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.

Alcuni link utili

Indice tutorial linguaggio JavaScript

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *