La délégation des évènements en Javascript avec Gator

Je remarque que beaucoup de monde fait de jQuery une utilisation plutôt limitée. Il y a énormément de modules qui permettent de faire à peu près tout et n’importe quoi avec jQuery mais son utilisation principale, dans mon cas, est la délégation des évènements. Mais si, vous savez, lorsque l’utilisateur clique sur le bouton rouge, je veux afficher un formulaire et quand il clique sur ce lien, je veux cacher cet élément… En somme, c’est la gestion des actions provoquées par l’internaute avec sa souris.

J’ai tendance à toujours avec un regard sur l’optimisation des thèmes et des scripts que je produis. Or comme vous le savez, jQuery n’est pas une librairie très légère : 262 ko en version normale et 90 ko en version compressée. Vous allez me dire qu’aujourd’hui avec les connexions qu’on a, ça ne pose pas de problèmes mais si vous possédez un site responsive (quoi ? vous devriez !), vous allez devoir télécharger une librairie de 90 ko en 3G alors que vous n’en n’utilisez pas 10%. Je ne critique pas jQuery, c’est une superbe bibliothèque qui permet de ne pas réinventer la roue…

 

gator js

 

Je vais vous parler d’une autre bibliothèque JavaScript que j’ai découvert il y a peu de temps : Gator développée par Craig Campbell. En quelques mots, c’est une bibliothèque d’à peine 1.89 Ko qui permet de déléguer les évènements comme pour jQuery, et en plus avec une syntaxe similaire. Il est compatible avec IE9+, Chrome, Safari 5+, Firefox 3.6+ mais combiné avec son plugin legacy.js, il est compatible avec tous les petits retardataires. Ce plugin fait lui aussi moins de 2 Ko.

Donc en gros, vous avez ceci :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Gator</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <a href="https://www.lije-creative.com" id="link" title="Me">LIJE Creative</a>

        <script src="gator.min.js"></script>
        <script src="gator-legacy.js"></script>
        <script src="gator-mouse.js"></script>
        <script>
            // code
        </script>
    </body>
</html>

 

Je vais vous montrer comment vous passer de jQuery pour utiliser Gator.js à la place à l’aide de différents bouts de codes.

Cache le lien sur lequel je clique sans pour autant aller sur l’url cible :

<a href="https://www.lije-creative.com" title="Me" id="link">LIJE Creative</a>

<script src="gator.min.js"></script>
<script src="gator-legacy.js"></script>
<script src="gator-mouse.js"></script>
<script>
    var link = document.getElementById('link');
    Gator(link).on('click', function(e) {
        e.preventDefault();
        link.style.display = "none";
    });
</script>

 

Ou encore :

<a href="#" title="Me" id="link" class="lien">LIJE Creative</a>

<script src="gator.min.js"></script>
<script src="gator-legacy.js"></script>
<script src="gator-mouse.js"></script>
<script>
    var gator = Gator(document);
    gator.on('mouseover', '#link', function() {
        alert('Non !');
    });
</script>

 

Sélection par l’ID d’un objet :

<a href="#" title="Me" id="link" class="lien">LIJE Creative</a>

<script src="gator.min.js"></script>
<script src="gator-legacy.js"></script>
<script src="gator-mouse.js"></script>
<script>
    Gator(document).on('mouseover', '#link', function() {
        this.style.display = "none";
    });
</script>

 

Il y a toujours la possibilité de coder en JavaScript pure, sans bibliothèque comme avec le code ci-dessous mais je n’ai aucune idée sur il est compatible avec les vieux navigateurs ou pas :

<a href="#" title="Me" id="link" class="lien">LIJE Creative</a>

<script>
    var link = document.getElementById('link');
    link.onclick = function(e) {
        e.preventDefault();
        alert('ok');
    }
</script>

 

ou :

<script>
    document.getElementById('link').addEventListener('click',function(e) {
        e.preventDefault();
        alert('ok');
    });
</script>

 

addEventListener est la manière de faire conseillée par la W3C. Elle permet d’ajouter plusieurs ‘listeners’ sur un même objet et elle fonctionne sur n’importe quoi (éléments du DOM ou éléments HTML). Les vieux navigateurs ne sont pas compatibles avec cette fonction malheureusement.

Element.onclick est une propriété du DOM (Document Object Model). C’est une fonction ajoutée à un objet. Le problème est qu’un seul listener de chaque type d’action peut être lié à l’objet (un listener pour le click, un listener pour le mouseover, etc.).

Il y a aussi la méthode <a onclick=”… Celle-ci est un attribut HTML. Votre code peut vite devenir énorme et illisible si vous utilisez cette technique. Elle est vraiment déconseillé.

Enquire.js, Media Queries en Javascript
Adsense Responsive : plusieurs méthodes

2 Comments on “La délégation des évènements en Javascript avec Gator”

  1. Elle m’a l’air très bien cette bibliothèque du crocodile! C’est ce que je cherchais en fait, un truc léger et qui pourrait aller avec tous les navigateurs, vieux ou récents. Il ne me reste plus qu’à m’y mettre maintenant :)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *