jQuery gére simplement les interactions avec l'utilisateur, nous parlerons d'événements.

Voici la structure de base de la gestion d'un événement :


$('mon sélecteur').on('type événement', fonction de callback)

un exemple :


$('#mon_id').on('click', function(){alert('Hello World !');})

En cas de clic de souris sur l'élément ayant pour id «mon_id», la fonction «function(){alert('Hello World !');}» sera exécutée.

La notion de fonction de callback est essentielle : une fonction de callback sera exécutée seulement après un « événement » donné (ici, un clic de souris sur l'élément ayant pour id «mon_id»), pas avant.

Notre fonction de callback ne porte pas de nom (nous n'avons pas « toto=function(){..} » ou « function toto(){...} »), on parle de fonction anonyme. Le nom d'une fonction est important quand le programmeur désire appeler (exécuter) cette fonction un peu plus loin dans le code, avec par exemple un « toto() ». Ici, ce n'est pas le programmeur qui va « demander » l'exécution de la fonction, mais un événement : donner un nom à notre fonction est inutile

N. B. Il existe énormément d'événements, voici une liste (non exhaustive) :

À faire vous-même 4.1

Créer les 2 fichiers suivants :

index.html


<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
 <button id="afficheListe">Afficher la liste</button>
 <ul>
 </ul>
</body>
</html>

script.js


$(function(){
 var mesFruitsTab=["banane","pomme", "ananas","pêche","fraise"];
 var firstClick=0;
 $('#afficheListe').on('click',function(){
  if (firstClick==0){
   for(var i=0;i<mesFruitsTab.length;i++){
    $('ul').append('<li>'+mesFruitsTab[i]+'</li>');
   }
   firstClick=1;
  }
 });
});

Décrire le résultat attendu. Quel est le rôle de la variable firstClick ?