Quels sont les avantages de la méthode on dans jquery

Avantages de la méthode on dans jquery : 1. La méthode on() peut lier les événements ajoutés dynamiquement aux éléments de la page, et les gestionnaires d'événements ajoutés sont applicables aux éléments actuels et futurs 2. La méthode on() peut être affectée à ; éléments à la fois L'ajout d'un ou plusieurs gestionnaires d'événements peut améliorer l'efficacité.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6.1, ordinateur Dell G3. La méthode

on() ajoute un ou plusieurs gestionnaires d'événements à l'élément sélectionné et aux éléments enfants.

Depuis la version 1.7 de jQuery, la méthode on() est le nouveau remplacement des méthodes bind(), live() et délégué(). Cette méthode apporte beaucoup de commodité à l'API et est recommandée car elle simplifie la base de code jQuery.

Il est difficile d'enregistrer des événements pour un seul élément séparément

$("p").click(function(){
  $(this).hide();
});
$("p").mouseenter(function(){
  $(this).css("background","blue");
});

Vous pouvez donc enregistrer plusieurs événements à la fois via on

$("p").on({
  click:function(){
    $(this).hide();
  },
  mouseenter:function(){
    $(this).css("background","blue");
  }
});
 
//还可以合并
$("div").on( "mouseenter mouseleave", function(){
    $(this).toggleclass( "current");
})

Il existe plusieurs façons de lier des événements avec jQuery. Il est recommandé d'utiliser .on(). méthode de liaison. Il y a 2 points :

1. La méthode on() peut lier des événements qui sont ajoutés dynamiquement aux éléments de la page

Par exemple, des éléments DOM qui sont ajoutés dynamiquement à la page, des événements liés avec le La méthode .on() n'a pas besoin d'être enregistrée. Lorsque l'élément de cet événement est ajouté, il n'est pas nécessaire de répéter la liaison. Certains étudiants peuvent être habitués à utiliser .bind(), .live() ou .delegate(). Si vous regardez le code source, vous constaterez qu'ils appellent en fait la méthode .on() et la méthode .live(). La méthode est dans jQuery1. La version 9 a été supprimée.

Les gestionnaires d'événements ajoutés à l'aide de la méthode on() s'appliquent aux éléments actuels et futurs (tels que les nouveaux éléments créés par des scripts).

bind:

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

live:

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

delegate:

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

2 La méthode on() peut ajouter un ou plusieurs gestionnaires d'événements à l'élément à la fois, ce qui peut améliorer l'efficacité

Beaucoup. les articles ont mentionné qu'en ce qui concerne l'utilisation du bouillonnement d'événements et des proxys pour améliorer l'efficacité de la liaison d'événements, la plupart d'entre eux ne répertorient pas les différences spécifiques, donc pour vérifier, j'ai fait un petit test.

Supposons que 5 000 li soient ajoutés à la page et utilisez les profils de l'outil de développement Chrome pour tester le temps de chargement de la page.

• Liaison ordinaire (appelons-la ainsi)

$("li").click(function(){
  console.log(this)
});

$(document).on("click","li",function(){
  console.log(this)
})

Temps d'exécution du processus de liaison

• La liaison ordinaire équivaut à l'enregistrement des événements de clic séparément sur li, et l'utilisation de la mémoire est environ 4,2 M, le temps de liaison est d'environ 72 ms. La liaison

• .on() utilise le proxy d'événement et enregistre uniquement un événement de clic sur le document. L'utilisation de la mémoire est d'environ 2,2 Mo et le temps de liaison est d'environ 1 ms.

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

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!