jQuery를 사용하여 DOM 요소 크기 변경 모니터링

원인

오늘 페이지를 작성하다 갑자기 그런 필요성이 생겼습니다. 상위 요소(DIV)의 높이가 자바스크립트로 계산된 고정값이기 때문에 멀티톡 플러그인이 추가되었습니다. 사용자가 댓글을 달면 하위 요소(DIV)의 높이 속성이 증가하여 하위 요소가 오버플로됩니다. 그런데 듀오수오 댓글 버튼에 콜백 함수를 추가하는 방법을 몰라서, 하위 요소의 크기 변화에 따라 상위 요소의 높이를 다시 계산해볼까 하는 생각이 들었습니다.

onresize?

보통 브라우저 창 전체가 변경되면 레이아웃을 수정하는 콜백 함수가 실행됩니다. window 객체의 크기 조정 이벤트가 사용되고

window.onresize = callback;

를 사용하여 바인딩됩니다. 하지만 resize 이벤트의 대상이 defaultView(window)인 것에 따라 자세한 내용은 MDN의 resize 문서를 참조하세요. 즉, window 객체에만 resize 이벤트가 있으므로 jquery 자체 이벤트 메커니즘을 사용하여 resize를 시뮬레이션하는 방법을 생각했습니다. 이벤트 on an 일반 요소

jQuery 이벤트를 사용하는 구현 아이디어

비교적 간단한 방법을 생각해 볼 수 있습니다.
1 요소가 크기 조정 개체에 바인딩되면 요소의 너비와 높이를 기록합니다
2. 가끔씩 requestAnimationFrame, setTimeout, setInterval을 사용하여 너비와 높이를 쿼리합니다. 기록된 너비와 높이가 다른 경우 콜백 함수를 실행하고 기록된 너비를 height

jQuery 플러그인

으로 업데이트합니다. 이 함수 Ben Alman은 jQuery 플러그인을 작성했습니다. 이것이 포털입니다
이 플러그인 코드(핵심 부분), 자세한 코드는 Ben Alman 블로그의 내용을 확인하세요.

(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는 jQuery 플러그인 개발자를 제공합니다. 자세한 내용은 jQuery 공식 문서를 참조하세요. 다음은 세 가지 후크가 있는 일반적인 jQuery 사용자 정의 이벤트 추가 방법입니다.
1. 설정 후크는 이벤트가 처음 호출될 때 호출됩니다. 특정 유형이 요소에 첨부됩니다. false가 반환되면 이벤트를 바인딩하는 데 기본 메서드가 사용됩니다.
2. 특정 유형의 최종 이벤트가 호출됩니다. 이 메소드를 지정하면 이벤트 처리프로그램(removeEventListener)이 제거되기 전에 실행됩니다. false가 반환되면 기본 바인딩 이벤트를 제거합니다. .on()과 같은 API를 통해 요소에 대해 jQuery는 이 후크를 호출합니다. 이 메서드는 이벤트가 요소에 바인딩될 때마다 실행됩니다

설정, 세 가지 후크, 해체 및 추가가 있습니다. 그 객체가 윈도우 객체인지 감지한 다음, 윈도우 객체 자체에 크기 조정 이벤트가 있기 때문에 이를 윈도우 객체에 따라 특별히 처리하는 것입니다

설정 후크에서 볼 수 있듯이 초기화 중에 전체 이벤트 처리 중에 , 요소 큐가 생성됩니다. 큐의 모든 요소는 데이터에 너비와 높이를 넣은 다음 250ms마다 루프 기능을 시작합니다. 변경 사항이 있는지 판단합니다. 콜백 함수가 트리거되고 데이터의 너비와 높이가 업데이트됩니다

분해 후크에서 볼 수 있듯이 요소

remove 이벤트가 발생하면 요소 대기열에서 요소를 제거하고 요소의 데이터만 지우면 됩니다. . 요소 큐의 마지막 요소인 경우 loopy는 더 이상 실행되지 않습니다. 추가 후크에서 콜백 함수가 래핑됩니다. 이를 통해 간단한 jQuery사용자 정의 함수

의 구현 메커니즘을 볼 수 있습니다.

위 내용은 jQuery를 사용하여 DOM 요소 크기 변경 모니터링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!