Le nouveau mécanisme de liaison d'événement de jQuery on() exemple application_jquery

En parcourant la liste obsolète de jQuery aujourd'hui, j'y ai trouvé live() et die(). J'ai rapidement jeté un coup d'œil et j'ai découvert qu'à partir de jQuery 1.7, jQuery a introduit un nouveau mécanisme de liaison d'événements, on() et off( ). Les deux fonctions gèrent la liaison d'événements de manière uniforme. Comme il existait auparavant bind(), live(), délégué() et d'autres méthodes pour gérer la liaison d'événements, jQuery a décidé de lancer une nouvelle fonction pour unifier les méthodes de liaison d'événements et remplacer les méthodes précédentes du point de vue de l'optimisation des performances et de l'unification des méthodes. .

on(événements,[sélecteur],[données],fn)

événements : un ou plusieurs types d'événements séparés par des espaces et un espace de noms facultatif, tel que "click" ou "keydown.myPlugin".

selector : une chaîne de sélection pour les descendants de l'élément sélecteur qui déclenche l'événement de filtre. Si le sélecteur est nul ou omis, l'événement est toujours déclenché lorsqu'il atteint l'élément sélectionné.

data : Lorsqu'un événement est déclenché, event.data doit être transmis à la fonction de traitement d'événement.

fn : La fonction exécutée lorsque l'événement est déclenché. La valeur false peut également être utilisée comme raccourci pour une fonction qui renvoie false.

Remplacer bind()

Lorsque le deuxième paramètre 'selector' est nul, il n'y a fondamentalement aucune différence d'utilisation entre on() et bind(), nous pouvons donc penser que on() a juste une option de plus que le paramètre 'selector' de bind() , ainsi de suite() peut facilement remplacer bind()

Remplacer live()

Avant la version 1.4, je pense que tout le monde aimait utiliser live() car il peut lier des événements à des éléments actuels et futurs. Bien sûr, après la version 1.4, délégué() peut également faire des choses similaires. Le principe de live() est très simple. Il délègue les événements via le document, on peut donc également utiliser on() pour obtenir le même effet que live() en liant l'événement au document.

Comment écrire en direct()

$('#list li').live('click', '#list li', function() { 
//function code here. 
});

Comment écrire sur()

$(document).on('click', '#list li', function() { 
//function code here. 
});

La clé ici est que le deuxième paramètre « sélecteur » est en vigueur. Il agit comme un filtre et seuls les éléments descendants de l'élément sélectionné déclencheront l'événement.

Remplacer le délégué()
délégué() a été introduit dans la version 1.4, dans le but de déléguer les problèmes de liaison d'événements des éléments descendants via des éléments ancêtres. Dans une certaine mesure, il présente des avantages similaires à live(). C'est juste que live() est délégué via l'élément document, et le délégué peut être n'importe quel nœud ancêtre. La méthode d'écriture pour utiliser on() pour implémenter le proxy est fondamentalement la même que celle de délégué().

Comment écrire délégué()

$('#list').delegate('li', 'click', function() { 
//function code here. 
});

Comment écrire sur()

$('#list').on('click', 'li', function() { 
//function code here. 
});

Il semble que l’ordre des premier et deuxième paramètres ait été inversé, mais tout le reste est fondamentalement le même.

Résumé

jQuery a lancé on() dans deux buts, l'un est d'unifier l'interface et l'autre est d'améliorer les performances, donc à partir de maintenant, utilisez on() pour remplacer bind(), live() et délégué. En particulier, n'utilisez plus live(), car il est déjà sur la liste obsolète et sera supprimé à tout moment. Si vous ne liez l'événement qu'une seule fois, puis utilisez one(), cela ne change rien.