Explication détaillée des méthodes et des différences entre bind et live ainsi que délégué et sur les événements de liaison dans jQuery

jQuery fournit quatre méthodes de surveillance event, à savoir bind, live, délégué, on, et les fonctions de désécoute correspondantes sont unbind, die, undelegate, off .

On sait qu'il existe 4 éléments de liste :

Élément de liste 1

Élément de liste 2

Élément de liste 3

Liste élément 4

1. bind

bind(type,[data],function(eventObject))

bind est un élément plus fréquemment utilisé. Sa fonction est de lier une fonction d'écoute d'un type d'événement spécifique à l'élément sélectionné. Les paramètres sont les suivants :

type : type d'événement, tel que clic, changement, survol de la souris, etc. ;

données : paramètre transmis à la surveillance fonction, obtenue via event.data. Facultatif ;

fonction : fonction d'écoute, qui peut transmettre l'objet événement. L'événement ici est l'objet événement encapsulé par jQuery, qui est différent de l'objet événement natif. Vous devez faire attention lorsque vous l'utilisez.

Code source :

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}

Vous pouvez voir que la méthode on est appelée en interne.

La caractéristique de bind est qu'il liera l'auditeur à l'élément cible, un à un. Il n'y a aucun problème à l'utiliser lorsque les éléments de la page ne seront pas ajoutés dynamiquement. Mais si un "élément de liste 5" est ajouté dynamiquement à la liste, il n'y aura aucune réponse lorsque vous cliquerez dessus et vous devrez le lier à nouveau.

2. live

live(type, [data], fn)

Les paramètres de live sont les mêmes que ceux de bind. Qu'est-ce qui ne va pas ? Jetons d'abord un coup d'œil au code source :

live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}

Vous pouvez voir que la méthode live ne lie pas l'auditeur à lui-même (this), mais à this.context.

live utilise le mécanisme de délégation d'événements pour effectuer la surveillance et le traitement des événements, et délègue le traitement des nœuds au document.

Les avantages de l'utilisation de la délégation d'événements sont clairs en un coup d'œil. Les éléments nouvellement ajoutés n'ont pas besoin de lier à nouveau les auditeurs.

3. délégué

lie l'événement d'écoute à l'élément parent le plus proche, code source :

delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}

Maintenant, nos choix sont plus flexibles. Non seulement vous pouvez utiliser l'événement délégation, vous pouvez également choisir l’objet de la délégation. Après tout, ce n’est pas bon de déranger toujours la même personne. Vous avez toujours besoin d'une certaine stratégie sur la façon de choisir l'objet délégué. Après tout, il peut y avoir de nombreux éléments parents. Je pense que le principe devrait être de sélectionner l'élément "stable" le plus proche. La raison de la sélection de l'élément le plus proche est que les événements peuvent surgir plus rapidement et être traités le plus rapidement possible. Ce qu'on appelle "stable" signifie que l'élément parent est sur la page depuis le début, n'est pas ajouté dynamiquement et ne disparaîtra pas à l'avenir. Cela garantit qu'il peut surveiller ses enfants à tout moment.

4. Les paramètres on

on(type,[selector],[data],fn)

sont similaires à ceux du délégué mais il existe encore de légères différences. Premièrement, le type et le sélecteur ont changé de position, et deuxièmement, le sélecteur est devenu facultatif.

$('#myol li').on('click',getHtml);

Vous pouvez voir l'événement.actuelLa cible est li elle-même, ce qui a le même effet que la liaison. Quant au passage du sélecteur, il a la même signification que le délégué À l'exception de l'ordre différent des paramètres, tout le reste est exactement le même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!