Exemples de méthode jQuery on() et avantages de jquery on() method_jquery

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 auparavant courantes développées à partir de cela incluent.

lier()

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

délégué()

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

live()

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

Les trois méthodes ci-dessus ne sont pas recommandées après jQuery1.8 Officiellement, dans 1.9, a annulé l'utilisation de la méthode live(), donc. il est recommandé à tous 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"});
　　});
});

liaison trigger()

$(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)
});

S'applique aux éléments non créés

$(document).ready(function(){
 $("div").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 dans jQuery. Il est recommandé d'utiliser la méthode .on() pour la liaison pour deux raisons :

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

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

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 );
}

Pour supprimer les événements liés par .on(), utilisez la méthode .off().

2. Les événements de liaison de méthode On() peuvent améliorer l'efficacité

De nombreux articles mentionnent l'utilisation du bouillonnement d'événements et des proxys pour améliorer l'efficacité de la liaison d'événements, mais 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 des outils de développement Chrome pour tester le temps de chargement de la page.

Reliure 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 5 000 li. 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() utilise un 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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde d'apprendre la méthode jquery on().