Exemples et avantages de la méthode jQuery on()

Utiliser la méthode jquery on() pour lier l' événement est une méthode officiellement recommandée. Suivez ensuite l'éditeur pour apprendre la méthode jquery on(). rejoignez-nous. Apprenons

La méthode jQuery on() est une méthode officiellement recommandée pour lier des événements.

$(selector).on(event,childSelector,data,function,map)

Plusieurs méthodes précédemment courantes développées à partir de cela incluent.

bind()

　$("p").bind("click",function(){
　　　　alert("The paragraph was clicked.");
　　});
　　$("p").on("click",function(){
　　　　alert("The paragraph was clicked.");
　　});

délégué()

$("#p1").on("click","p",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#p2").delegate("p","click",function(){
　　　　$(this).css("background-color","pink");
　　});

live()

　　$("#p1").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("#p2").live("click",function(){
　　　　$(this).css("background-color","pink");
　　});

Les trois méthodes ci-dessus ne fonctionneront pas après jQuery1.8 Il est recommandé d'utiliser . Officiellement, la méthode live() a été annulée dans 1.9, il est donc recommandé d'utiliser la méthode on().

astuce : Si vous devez supprimer la méthode liée à on(), vous pouvez utiliser la méthode off().

$(document).ready(function(){
　　$("p").on("click",function(){
　　　　$(this).css("background-color","pink");
　　});
　　$("button").click(function(){
　　　　$("p").off("click");
　　});
});

astuce : Si votre événement ne nécessite qu'une seule opération, vous pouvez utiliser la méthode one()

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

trigger ( )Liaison

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
　　$("input").select(function(){
　　　　$("input").after(" Text marked!");
　　});
　　$("button").click(function(){
　　　　$("input").trigger("select");
　　});
});

Plusieurs événements liés à la même fonction

$(document).ready(function(){
 $("p").on("mouseover mouseout",function(){
  $("p").toggleClass("intro");
 });
});

Plusieurs événements liés à différentes fonctions

$(document).ready(function(){
 $("p").on({
  mouseover:function(){$("body").css("background-color","lightgray");}, 
  mouseout:function(){$("body").css("background-color","lightblue");}, 
  click:function(){$("body").css("background-color","yellow");} 
 });
});

Lier des événements personnalisés

$(document).ready(function(){
 $("p").on("myOwnEvent", function(event, showName){
  $(this).text(showName + "! What a beautiful name!").show();
 });
 $("button").click(function(){
  $("p").trigger("myOwnEvent",["Anja"]);
 });
});

Transmettre les données à la fonction

function handlerName(event) 
{
 alert(event.data.msg);
}
$(document).ready(function(){
 $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

Applicable aux non-créés elements

$(document).ready(function(){
 $("p").on("click","p",function(){
  $(this).slideToggle();
 });
 $("button").click(function(){
  $("<p>This is a new paragraph.</p>").insertAfter("button");
 });
});

Il existe plusieurs façons de lier des événements avec jQuery. Il est recommandé d'utiliser la méthode .on() pour la liaison, pour deux raisons : <🎜. >

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

Par exemple, les éléments DOM ajoutés dynamiquement à la page, utilisez . par la méthode on() n'a pas besoin de se soucier du moment où l'élément qui a enregistré l'événement est ajouté, ni d'être lié à plusieurs reprises. 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.

Utilisez la méthode .off() pour supprimer les événements liés par .on().

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 améliorer l'efficacité de la liaison d'événements

De nombreux articles ont mentionné l'utilisation du bouillonnement d'événements et des proxys pour améliorer l'efficacité de la liaison d'événements. d'entre eux Il n'y a pas de différences spécifiques répertoriées, donc pour vérifier, j'ai fait un petit test.

Supposons que 5 000 LI soient ajoutés à la page et utilisez les profils des outils de développement Chrome pour tester le temps de chargement de la page.

Liaison normale (appelons-la ainsi)

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

Délai d'exécution du processus de liaison

2013-08-13_190358

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

Liaison .on()

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

Délai d'exécution du processus de liaison

2013-08-13_191010

.on() la liaison utilise un proxy d'événement, un seul événement de clic est enregistré 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.

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!