Esempio 03 – Gli eventi

Prima di addentrarci nel nuovo esempio, diamo un’occhiata agli eventi supportati da JQuery e col quale cerchiamo di familiarizzare nelle nostre funzioni.

jQuery click()
jQuery dblclick()
jQuery mouseenter()
jQuery mouseleave()
jQuery mousedown()
jQuery mouseup()
jQuery hover()
jQuery focus() e blur()

Click e doppio click sono molto intuitivi. Nell’esempio 01 abbiamo usato click. Provate a sostituire a click dbclick, otterrete un comportamento simile ma questa volta cliccando due volte. Enter così un po’ come hover genera un evento quando col mouse si passa sul frammento selezionato e si esce (sconsigliato, meglio usare mouseenter), leave quando si toglie da quella selezione. Mouseup e mousedown assomigliano molto al click. Qui sotto riportiamo un esempio col mouseenter che interagisce con un frammento a noi noto di javascript che è interscambiabile con jquery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#p1").mouseenter(function(){
        alert("You entered p1!");
    });
});
</script>
</head>
<body>

<p id="p1">Metti/entra col mouse su questo paragrafo</p>

</body>
</html>

Ultima modifica 22 Marzo 2023