Utilisez jQuery pour surveiller les changements de taille des éléments DOM

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. in y a été ajouté. Après les commentaires de l'utilisateur, l'attribut height de l'élément enfant (DIV) est augmenté, provoquant un débordement de l'élément enfant. 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.

onresize?

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 fenêtre est utilisé et est lié à l'aide de :

window.onresize = callback;

. 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

L'idée d'implémentation de l'utilisation d'événements jQuery

Vous pouvez penser à une manière relativement simple :
1. redimensionnez l'objet, enregistrez la largeur et la hauteur de l'élément
2. Utilisez requestAnimationFrame, setTimeout et setInterval pour interroger sa largeur et sa hauteur à intervalles réguliers. 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, qui est le code (partie centrale) du portail
Veuillez vérifier. 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 la manière typique. pour ajouter des événements personnalisés jQuery, qui ont 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. Exécuté lors de la première liaison. Si false est renvoyé, la valeur par défaut. La méthode est utilisée pour lier l'événement
2. teardown : 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 l'événement . gestionnaire (removeEventListener). Si false est renvoyé, l'événement lié par défaut
sera supprimé. 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. Chaque fois qu'un événement est lié à un élément, les trois hooks

setup, teardown et add seront exécutés, la première chose que chaque hook fait est de détecter si l'objet est un objet window, puis gérez-le spécialement en fonction de l'objet window, car l'objet window lui-même a un événement de redimensionnement

Comme vous pouvez le voir sur le hook de configuration, l'ensemble de l'événement est initialisé Lors du traitement, créez une file d'attente d'éléments pour chaque élément. dans la file d'attente, met la largeur et la hauteur dans les données, puis démarre la fonction loopy toutes les 250 ms. Dans la fonction loopy, il est jugé s'il y a un changement. S'il y a un changement, la fonction de rappel est déclenchée et les données sont. mis à jour. La largeur et la hauteur dans

sont visibles à partir du crochet de démontage. Lorsque l'élément supprime l'événement , il lui suffit de supprimer l'élément de la file d'attente des éléments et d'effacer les données. l'élément. S'il s'agit du dernier élément de la file d'attente des éléments, l'exécution ne continuera plus. Dans le hook d'ajout, la fonction de rappel est enveloppée

À partir de là, vous pouvez voir un simple mécanisme d'implémentation jQuery

personnalisé. fonction

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!