Gestion avancée des événements

45 min Niveau 8

Introduction

JQuery propose différentes méthodes pour une gestion des événements avancée. Parmi celles-ci, la méthode on() déjà partiellement abordée, les méthodes trigger(), triggerHandler() et off() permettent de déclencher ou de supprimer des événements. Quelques propriétés utiles de l’objet event permettent également de gérer des événements de manière plus poussée.

La méthode on()

Dans le cas d'utilisation le plus simple, la syntaxe de la méthode on() est similaire à la méthode JavaScript addEventListener, car il est possible de transmettre le nom de l'événement en tant que premier argument pour un traitement, et transmettre une fonction de rappel (callback) à exécuter une fois que l'événement est déclenché en tant que deuxième argument.

$(document).ready(function(){
    $("p").on("click", function(){
        $(this).hide();
    })
});

Le premier cas d'utilisation de on() est très simple. Cependant, l'utilisation de on() permet d'attacher plusieurs événements à un même élément en lui passant un argument sous forme d’objet javascript.

<!-- Code HTML de base -->
<style>
    .rouge {
        background-color: red;
    }
</style>

<body>
    <h1>Titre principal</h1>
    <div>
        <p>Un paragraphe dans un div</p>
        <p>Un autre paragraphe dans un div</p>
    </div>
    <p id="text">Un paragraphe hors div</p>
</body>

$(document).ready(function(){
    // Enregistrement d’un gestionnaire pour plusieurs événements pour un 
    // élément
    $("div").on("mouseenter mouseleave", function () {
        $(this).toggleClass("rouge");
    });

    // Enregistrement de plusieurs gestionnaires pour plusieurs événements     
    // pour un seul élément
    $("#text").on({
        // Si click, affiche “J'ai cliqué”
        click: function () {
            $(this).text("J'ai cliqué");
        },
        // Quand la souris est dans la zone, change le fond en noir
        mouseenter: function () {
            $(this).css("background-color", "black"); 
        },
        //”Quant la souris sort de la zone, change le fond en blanc
        mouseleave: function () {
            $(this).css("background-color", "white");
        }
    });
});

Se connecter pour voir la suite

Besoin d'aide ?

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