Les événements en jQuery
Les événements en jQuery
-
Objectifs
- Connaitre les événements en jQuery.
- Savoir utiliser les événements en jQuery.
-
Présentation
- Comme son nom l’indique, c’est quelque-chose, une action plus précisément, qui survient à la suite d’un déclencheur spécifique.
- La notion d’événements, ou events, est donc très répandue en programmation, on parle même de programmation événementielle…
- Il s’agit d’une action utilisateur, lorsque vous cliquez sur un bouton pour ouvrir ou fermer une fenêtre, vous déclencher un événement, qui en fonction de conditions requises, va exécuter le code chargé de réaliser l’action que vous avez demandée.
- Ces actions vont généralement provenir soit du navigateur lui même, soit des utilisateurs. Les événements load et ready se déclenchent lorsque la page complète est chargée ou lorsque le DOM de la page est chargée tandis que l’événement click se déclenche lorsqu’un utilisateur clique sur un élément de la page.
- En JavaScript, on va pouvoir gérer des événements de trois manières différentes :
- En utilisant les attributs d’
événements HTML; - En utilisant des gestionnaires inline de type "
on-event" - En utilisant la méthode
addEventListener(). - Pour la gestion d’événements, le mot clé
thisfait référence à l’élément qui a initié l’événement, c’est-à-dire l’élément où l’événement a été déclenché. -
La première fonction JQuery
- En
JQuery, la première action que vous réalisez systématiquement est en elle-même un événement. $(document).ready(function(){
// Le code jQuery ici !
});- Le "ready" est un événement déclenché par le navigateur indiquant que le DOM est disponible.
- Plus précisément, cette fonction marche autour de l’évènement ready() qui écoute le chargement du document.
-
Écouteur d’événement
- L’écoute d’un événement, c’est tout simplement le fait d’attacher une action bien précise à remplir à un élément pour déclencher une fonction, appelée écouteur d’événement.
- La sémantique "écoute" ou "écouteur" est récurrente en programmation événementielle, et joue un rôle important.
- En général, les API système de votre navigateur sont programmées pour être à l’écoute de tous les événements que vous pourriez déclencher.
- Il est possible, en programmation avancée, de modifier le comportement de ces écouteurs.
- Ainsi, lorsque vous déclenchez l’événement
onClick()avec votre souris, un écouteur est prêt à le recevoir et à le router vers le code que vous avez choisi d’exécuter. -
Gestionnaires d’événements
- Un gestionnaire d’événement est une fonction destinée à être lancée en réponse à une action de l’utilisateur (par exemple un clic de souris sur un élément donné).
- jQuery fournit deux manières de définir un gestionnaire d’événement :
- Soit en indiquant le nom du gestionnaire, par exemple…
- Soit en codant directement le gestionnaire, par exemple…
-
Application
- Créer une page HTML5
- Créer deux paragraphes dans la page
- Au chargement de la page, affecter aux deux paragraphes le gestionnaire colorerP associé au
clic. - Cette fonction (utiliser la première version cité en haut) change la couleur de l’élément cliqué en bleu.
- Sous les deux paragraphes Créer un élément div avec un id="idDiv" contenant le texte suivant: "L’écoute d’un événement, c’est tout simplement le fait d’attacher une action bien précise à remplir à un élément pour déclencher une fonction, appelée écouteur d’événement."
- Au chargement de la page, affecter à l’élément div le gestionnaire colorerDiv associé au
clic. - Cette fonction (utiliser la deuxième version cité en haut) change la couleur de l’élément cliqué en vert.
-
Correction
$("p").on("click", "", Gestionnaire) ;
function Gestionnaire(evt)
{
alert("Ceci est un paragraphe") ;
}$("p").on("click", "", function(){alert("Ceci est un paragraphe");}) ;<script>
$(document).ready(function(){
$("p").on("click", "", colorerP);
$("div#idDiv").on("click", "", function(){this.style.color="red";});
});
function colorerP(){
this.style.color="blue";
}
</script>