Utilisez jQuery pour surveiller la taille des éléments DOM changes_jquery

Cause

Quand j'écrivais une page aujourd'hui, j'ai soudainement eu un tel besoin. Puisque la hauteur de l'élément parent (un DIV) est une valeur fixe calculée par javascript, un plug-in multi-talk y a été ajouté. Selon les commentaires de l'utilisateur, l'attribut de hauteur de l'élément enfant (DIV) est augmenté, provoquant un débordement des éléments enfants. Mais je ne savais pas comment ajouter une fonction de rappel pour le bouton de commentaire de Duosuo, j'ai donc pensé à recalculer la hauteur de l'élément parent en fonction du changement de taille de l'élément enfant.

onredimensionner ?

Habituellement, une fonction de rappel qui modifie la mise en page est déclenchée lorsque toute la fenêtre du navigateur change. L'événement resize de l'objet window est utilisé, en utilisant :

window.onresize = callback;

à lier. Mais selon la cible de l'événement de redimensionnement est defaultView (window), veuillez consulter le document de redimensionnement de MDN pour plus de détails. C'est-à-dire que seul l'objet window a un événement de redimensionnement, j'ai donc pensé à utiliser le propre mécanisme d'événement de jQuery pour simuler un redimensionnement. événement sur un élément ordinaire

Idées d'implémentation utilisant des événements JQUERY

Vous pouvez penser à un moyen plus simple :

1. Lorsque l'élément est lié à l'objet de redimensionnement, enregistrez la largeur et la hauteur de l'élément
2. Utilisez requestAnimationFrame, setTimeout et setInterval pour interroger sa largeur et sa hauteur de temps en temps. Si elles sont différentes de la largeur et de la hauteur enregistrées, exécutez la fonction de rappel et mettez à jour la largeur enregistrée en hauteur

.

Plug-in JQUERY

Ben Alman a écrit un plug-in jQuery pour cette fonction, Portal
Le code du plug-in (partie principale), veuillez consulter le contenu du blog de Ben Alman pour le code détaillé :

(function($, window, undefined) {
 var elems = $([]),
  jq_resize = $.resize = $.extend($.resize, {}),
  timeout_id,
  str_setTimeout = 'setTimeout',
  str_resize = 'resize',
  str_data = str_resize + '-special-event',
  str_delay = 'delay',
  str_throttle = 'throttleWindow';
 jq_resize[str_delay] = 250;
 jq_resize[str_throttle] = true;
 $.event.special[str_resize] = {
  setup: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.add(elem);
   $.data(this, str_data, {
    w: elem.width(),
    h: elem.height()
   });
   if (elems.length === 1) {
    loopy();
   }
  },
  teardown: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.not(elem);
   elem.removeData(str_data);
   if (!elems.length) {
    clearTimeout(timeout_id);
   }
  },
  add: function(handleObj) {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var old_handler;
   function new_handler(e, w, h) {
    var elem = $(this),
     data = $.data(this, str_data);
    data.w = w !== undefined ? w : elem.width();
    data.h = h !== undefined ? h : elem.height();
    old_handler.apply(this, arguments);
   }
   if ($.isFunction(handleObj)) {
    old_handler = handleObj;
    return new_handler;
   } else {
    old_handler = handleObj.handler;
    handleObj.handler = new_handler;
   }
  }
 };

 function loopy() {
  timeout_id = window[str_setTimeout](function() {
   elems.each(function() {
    var elem = $(this),
     width = elem.width(),
     height = elem.height(),
     data = $.data(this, str_data);
    if (width !== data.w || height !== data.h) {
     elem.trigger(str_resize, [data.w = width, data.h = height]);
    }
   });
   loopy();
  }, jq_resize[str_delay]);
 }
})(jQuery, this);

jQuery fournit aux développeurs de plug-ins jQuery une interface pour ajouter des événements personnalisés. Pour plus de détails, veuillez vous référer à la documentation officielle de jQuery. Voici une manière typique d'ajouter des événements personnalisés jQuery, qui comporte trois hooks :

.

1. setup : le hook de configuration est appelé la première fois qu'un événement d'un type particulier est attaché à un élément. Il est exécuté lorsqu'il est lié pour la première fois. Si false est renvoyé, la méthode par défaut est utilisée pour. lier l'événement
2. démontage : le hook de démontage est appelé lorsque l'événement final d'un type particulier est supprimé d'un élément. Si cette méthode est spécifiée, elle sera exécutée avant de supprimer le gestionnaire d'événements (removeEventListener). Si false est renvoyé, la liaison par défaut. sera supprimé. Événement
3. ajouter : Chaque fois qu'un gestionnaire d'événements est ajouté à un élément via une API telle que .on(), jQuery appelle ce hook. Cette méthode sera exécutée chaque fois qu'un événement est lié à un élément

.

Il existe trois hooks : setup, teardown et add. La première chose que fait chaque hook est de détecter si l'objet est un objet window, puis de le gérer spécialement en fonction de l'objet window, car l'objet window lui-même a un redimensionnement. événement

Comme vous pouvez le voir sur le hook de configuration, lors de l'initialisation de l'ensemble du traitement des événements, une file d'attente d'éléments est créée. Chaque élément de la file d'attente met la largeur et la hauteur dans les données, puis démarre la fonction loopy toutes les 250 ms. Déterminez s'il y a un changement. S'il y a un changement, déclenchez la fonction de rappel et mettez à jour la largeur et la hauteur des données

.

Comme vous pouvez le voir sur le crochet de démontage, lorsque l'élément est supprimé, il vous suffit de supprimer l'élément de la file d'attente des éléments et d'effacer les données de l'élément. S'il s'agit du dernier élément de la file d'attente des éléments, loopy ne continuera pas à être exécuté

Dans le hook d'ajout, la fonction de rappel est enveloppée

Ici vous pouvez voir le mécanisme d'implémentation d'une simple fonction personnalisée jQuery