Bien que le gestionnaire d''événements peut ajouter de fortes capacités interactives pour les pages Web modernes, mais sans discernement blanc pour ajouter un grand nombre de gestionnaires d''événements, il est absolument un acte stupide.

  Analysons: le gestionnaire d''événements est essentiellement une fonction est un objet, stocké dans la mémoire, la fixation d''un grand nombre de gestionnaires d''événements fera des objets dans la mémoire augmente, les performances des applications Web deviendra de plus en plus mauvaise expérience utilisateur est très mauvaise.

  Afin de faire bon usage du gestionnaire d''événements, l''événement donnant lieu à la commission, pour améliorer les performances.

  les délégués de l''événement

  délégué de l''événement (délégation de l''événement): Le gestionnaire pour le même événement sur plusieurs sous-noeud lié à son parent jusqu''à un traitement unifié bouillonne d''un n?ud enfant de l''événement sur le n?ud parent, cette technique est appelée délégation de l''événement.

  Ajouter: délégué d''événement ne se limite pas entre les n?uds parents et enfants.Peut aussi jouer de cette fa?on, par exemple, il y a un bon nombre de pages du document dans une autre position du bouton, cliquez sur lient les événements en utilisant la délégation d''événements, nous pouvons unifier ces événements est lié à l''élément du corps, et ensuite traitées (même si, en général si rarement utilisé).

  Les exemples suivants illustrent les avantages de l''enfant de l''événement délégué progressivement:

  

      

  • liste 1
  •   

  • liste 2
  •   

  • liste 3
  •   

  • liste 4
  •   

  • liste 5
  •   

  Considérons le code ci-dessus, nous avons maintenant une demande: que quelle que soit la liste cliquez ci-dessus (ul) dont la sous-liste (li), une bo?te appara?tra pour montrer ce que l''on clique sur la sous-liste.

  La demande est pas difficile?Avec la demande, suivi par le code de l''écriture, et maintenant il y a deux fa?ons devant vos yeux: 1. Reliure événement click pour chaque élément enfant li, gestionnaire puis définissez; 2. Utilisez délégation d''événements, cliquez sur bind événement élément parent ul, puis définissez le gestionnaire

  // une méthode

  var = list1 documents.getElementById ( "list-1");

  list1.addEventListener ( "click", function () {

  alerte (cette.premier enfant.nodeValue);

  }, Faux);

  var = liste2 documents.getElementById ( "list-2");

  liste2.addEventListener ( "click", function () {

  alerte (cette.premier enfant.nodeValue);

  }, Faux);

  var = liste3 documents.getElementById ( "list-3");

  liste3.addEventListener ( "click", function () {

  alerte (cette.premier enfant.nodeValue);

  }, Faux);

  var = liste4 documents.getElementById ( "list-4");

  liste4.addEventListener ( "click", function () {

  alerte (cette.premier enfant.nodeValue);

  }, Faux);

  var = list5 documents.getElementById ( "list-5");

  list5.addEventListener ( "click", function () {

  alerte (cette.premier enfant.nodeValue);

  }, Faux);

  // Méthode Deux

  var = parentList documents.getElementById ( "-liste des parents");

  parentList.addEventListener ( "click", function () {

  var cible = événement.cible;

  if (cible.nodeName.toLowerCase () === "li") {

  alerte (cible.premier enfant.nodeValue);

  }

  }, Faux);

  Vu le code, je l''ai écrit ici quelques avantages des deux méthodes suivantes: 1. La réduction du nombre de visites DOM améliorer les performances; 2. Les gestionnaires d''événements élément enfant de l''unité est lié à l''élément parent, ce qui réduit la quantité de mémoire requise; 3. Vous pouvez mieux gérer les gestionnaires d''événements, tels que la suppression d''un gestionnaire d''événements pour référence

  Note: si la demande pour les différents sous-éléments ne sont pas les mêmes, afin que nous puissions réécrire ce qui précède deux:

  // Méthode Deux

  var = parentList documents.getElementById ( "-liste des parents");

  parentList.addEventListener ( "click", function () {

  var cible = événement.cible;

  if (cible.nodeName.toLowerCase () === "li") {

  commutateur (cible.id) {

  cas "liste-1":

  alert ( ? Plus vous apprenez, plus je ignorance!? );

  Pause;

  cas "liste-2":

  alert ( ? L''amour est un art!? );

  Pause;

  cas "liste-3":

  cible.innerHTML = ? Oh, j''ai changé ah!? ;

  Pause;

  cas "liste-4":

  cible.style.background = "# aaa";

  Pause;

  cas "liste-5":

  cible.style.color = "red";

  target.style.fontSize = "2em";

  Pause;

  défaut:

  Pause;

  }

  }

  }, Faux);

  Parce que le délégué de l''événement repose mécanisme de formation de bulles d''événements, de sorte que tous les événements peuvent être des événements confiés.

  La plupart des événements délégués d''événements appropriés comprennent: cliquez, mousedown, mouseup, keydown, keyup et keypress.

  les délégués de l''événement est juste une très bonne idée de l''événement de liaison, il ne doit pas adhérer de fa?on rigide à l''exemple ci-dessus, à apprendre et à utiliser! ^ _ ^

  Retirer les gestionnaires d''événements

  Comme nous l''avons dit, le gestionnaire d''événements en mémoire, chaque fois que le gestionnaire d''événements attribués aux éléments, il établira un lien entre le fonctionnement du code du navigateur pour interagir avec la page de support de code JavaScript.Cette connexion, plus lentement l''exécution de la page.Nous avons dit avant que le délégué de l''événement est utilisé pour limiter le nombre de connexions établies.

  Il y a la mémoire de ces événements gestionnaire ne sont plus utilisés après l''utilisation, sinon soulagé, peut aussi affecter la mémoire et les performances des applications Web.

  

  bouton var = Document.getElementById ( "bouton");

  bouton.onclick = function () {

  // soumettre un formulaire de code d''opération

  bouton.onclick = null; // gestionnaires d''événements de suppression

  un événement.target.premier enfant.nodeValue = ? submit...? ;

  };

  Le principe général est le suivant: DéMONTEZ les gestionnaires d''événements ne obsolète plus utilisé, ce qui libère la mémoire!

  C''est tout pour cet article, je l''espère le contenu de cet article, nous étudions ou le travail peut apporter un peu d''aide, mais aussi l''espoir d''un grand nombre de scripts de soutien Maison!

  Vous pouvez également être intéressé par l''article: JavaScript mécanismes d''allocation et de gestion de la mémoire une analyse détaillée pour comprendre Javascript_01_ comprendre le principe de l''analyse de l''allocation de mémoire en profondeur la compréhension des fuites de mémoire dans les programmes JavaScript d''apprentissage et de gestion de la mémoire du Bug des variables JScript JavaScript, gestion de la mémoire JavaScript et la mémoire Scopes avec moi l''introduction JavaScript question de la libération de la mémoire des variables js détaillées, plusieurs cas scope mémoire et les fuites mémoire js détaillées js discutées en détail les questions de presse de mémoire JavaScript parler aussi de l''étude des principes d''allocation de mémoire javascript optimisation de la mémoire de cas

événements JavaScript et l''impact sur les performances de la mémoire

Recommend Article: