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");
        }
    });
});

Déclencher un événement avec trigger() et triggerHandler()

Les méthodes jQuery trigger() et triggerHandler() permettent de déclencher des événements "manuellement" en passant le nom de l’événement en argument.

Contrairement à trigger(), la méthode triggerHandler() ne déclenche pas l'action par défaut de l’élément, il se contente de déclencher l’événement lié. Par exemple, triggerHandler("submit") n’engendre pas la soumission d’un formulaire.

trigger() affecte tous les éléments avec des caractéristiques cibles, tandis que triggerHandler() n'affecte que le premier élément cible rencontré.

<!-- Code HTML de base -->
<body>
    <h1>Titre principal</h1>
    <input type="text" placeholder="Je veux le focus" id="focus">
    <button id="button1">trigger("focus")</button>
    <button id="button2">triggerHandler("focus")</button>
    <span id="message"></span>
</body>

$(document).ready(function(){           
    // trigger() s'exécute lors du clic sur le bouton #button1. Ainsi le 
    // focus est mis sur l’élément “#focus”
    $('#button1').click(function () {
        $('#focus').trigger('focus');
    });

    // triggerHandler() s'exécute. Excute le gestionnaire d'evenement
    // de l'evenement declenche mais ne declenche pas l'action de
    // l'evenement
    $('#button2').click(function () {
        $('#focus').triggerHandler('focus');
    });

    // On attache un gestionnaire d'évènement focus à notre input
    $('#focus').focus(function () {
        $('#message').text('Evènement focus déclenché');
    })
});

Se connecter pour voir la suite

Besoin d'aide ?

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