Introduction à la gestion d’évènements

30 min Niveau 6

Introduction

JQuery inclut un système de gestion d’événements. Ceux-ci sont gérés grâce à des “écouteurs”, traditionnellement appelés “EventListeners” (fr : écouteurs d’événements). Le principe de base de la gestion d'événement est donc de placer des écouteurs qui vont déclencher des actions dès activation.

JQuery introduit de nombreux événements, voici une liste non exhaustive :

click
mouseenter
keyup
change
etc…

Chacun de ces événements peut être appelé de trois manières différentes, voici 3 exemples en utilisant l’événement “click”, et se basant sur un code HTML simple :

<!-- Code HTML simple -->
<body>
    <p>Je suis un texte</p>
</body>

1 - Avec la méthode du nom de l’événement

Chaque événement dispose d’une méthode homonyme permettant de définir un écouteur d’événement de manière simple. L’événement de “click” est ainsi récupéré grâce à la méthode click():

// Exemple avec la méthode "click"
$(document).ready(function () {
    // Lorsqu'on clique sur un élément p
    $("p").click(function () {
        // Modifie le texte sur l'élément p cliqué
        $(this).text("Paragraphe cliqué");
    });
});

<!-- Code HTML après exécution -->
<body>
    <p>Paragraphe cliqué</p>
</body>

2 - Avec la méthode “on()” appliquée sur une sélection

La méthode “on” est une méthode générique qui permet d’appeler n’importe quel événement. Il faut lui spécifier en argument le nom de l’événement à appliquer sur la sélection initiale :

// Exemple avec la méthode "on"
$(document).ready(function () {
    // Lorsqu'on clique sur un élément p
    $("p").on("click", function () {
        // Modifie le texte sur l'élément p cliqué
        $(this).text("Paragraphe cliqué");
    });
});

<!-- Code HTML après exécution -->
<body>
    <p>Paragraphe cliqué</p>
</body>

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !