Eventi Come rendere gli elementi HTML di una pagina web sensibili alle azioni del mouse

Eventi Nella programmazione le azioni con cui lutente può interagire con il programma vengono dette eventi. Un evento è una richiesta asincrona che l'utente fa al programma sotto forma di azioni col mouse o con la tastiera. Asincrona vuol significare che è indipendente da eventuali altre istruzioni che il programma sta eseguendo.

Eventi in JavaScript In JavaScript, il browser Web notifica agli script JavaScript l'avvenuta ricezione di una segnalazione dal mouse o da tastiera da parte dell'utente, generando degli eventi. Quando si verifica un evento, il browser Web cerca di richiamare una corrispondente funzione di gestione degli eventi per rispondere

Eventi del mouse in JavaScript onClick L'utente fa clic col mouse onDblClick L'utente fa doppio clic col mouse onMouseDown L'utente preme il pulsante del mouse onMouseOut Il mouse si sposta dall'elemento onMouseOver Il mouse va sull'elemento onMouseUp L'utente rilascia il pulsante del mouse

Gestire gli eventi in JavaScript Per inserire la gestione degli eventi in una pagina web occorre –NellHTML Individuare lelemento HTML da rendere sensibile allevento inserendo in esso una istruzione (HTML) che richiama le istruzioni JavaScript –Nello SCRIPT Scrivere le istruzioni JavaScript che il browser deve eseguire quando lutente agisce sullelemento HTML con levento

Esempio 1 Rendiamo sensibile unimmagine al click su di essa in modo che il click richiami una funzione JS contenente delle istruzioni onClick="go()" messo come attributo dellelemento IMG ha il seguente significato: quando lutente fa click (sullimmagine) manda in esecuzione la funzione JS di nome go() function go() { alert("Hai cliccato sull'immagine"); }

Nota Nellistruzione onClick="go()" onClick è HTML (e può essere scritto indifferente a maiuscole e minuscole go() è JavaScript e deve essere scritto esattamente come definito nella funzione dello script.

Esempio 2 Quando il mouse va sul paragrafo viene mostrato un messaggio in una finestra di alert; così come quando il mouse esce dal paragrafo Nellelemento P vi sono due gestori di evento Bla Bla Bla function ci_sei_sopra() { alert("Sei sopra il paragrafo") } function ne_sei_uscito() { alert(Sei uscito dal paragrafo") }

Esempio 3 Quando si va col mouse sullimmagine questa viene ingrandita e quando si esce dallimmagine, viene rimessa alla dimensione originaria function zoom1() { x=document.getElementById("myimg"); x.width=x.width*1.25; x.height=x.height*1.25;// moltiplica larghezza e altezza per 1.25 } function zoom2() { x=document.getElementById("myimg"); x.width=x.width/1.25; x.height=x.height/1.25;// divide larghezza e altezza per 1.25 }

Giochino Limmagine si muove a caso e quando si clicca su di essa si fa un punto numero_volte = 0; function muovi_a_caso() { x = document.getElementById("myimg"); a = parseInt(Math.random()*800)+50; b = parseInt(Math.random()*600)+50; x.style.left = a; x.style.top = b; } setInterval("muovi_a_caso()", 200); function beccato() { numero_volte++; alert("colpito " + numero_volte + " volte"); }