Comment utiliser le nouveau mécanisme d'événement de liaison de jquery sur method_jquery

En parcourant la liste obsolète de jQuery, 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 avait introduit un nouveau mécanisme de liaison d'événements, on() et off(). 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() est tout simplement meilleur que bind ( ) a un paramètre 'selector' facultatif, donc on() 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.

Méthode d'écriture Live()

Copier le code Le code est le suivant :

$ ('#list li').live('click', '#list li', function() {
//code de fonction ici.
}

);

on() s'écrit

Copier le code Le code est le suivant :

$(document). on('click', '#list li', function() {
//code de fonction ici.
});
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 délégué()

delegate() a été introduit dans la version 1.4. Son objectif est 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é()

Copier le code Le code est le suivant : $('# list').delegate('li', 'click', function() {

//code de fonction ici.

});
Méthode d'écriture on()

Copier le code

Le code est le suivant :$ ('#list ').on('click', 'li', function() { //code de fonction ici. }); Il semble que l'ordre des premier et deuxième paramètres soit 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(), il n'y a aucun changement.