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

원인

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

크기를 조정하시겠습니까?

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

window.onresize = callback;

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

JQUERY 이벤트를 활용한 구현 아이디어

더 간단한 방법을 생각해 볼 수 있습니다.

1. 요소가 크기 조정 객체에 바인딩되면 요소의 너비와 높이를 기록합니다
2. requestAnimationFrame, setTimeout, setInterval을 사용하여 가끔씩 너비와 높이를 쿼리합니다. 기록된 너비와 높이가 다른 경우 콜백 함수를 실행하여 기록된 너비를 높이로 업데이트합니다

JQUERY 플러그인

Ben Alman은 이 기능을 위한 jQuery 플러그인 Portal
을 작성했습니다. 플러그인(핵심 부분)의 코드, 자세한 코드는 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가 리턴되면 기본 바인딩입니다. 이벤트가 삭제됩니다
3. 추가: .on()과 같은 API를 통해 이벤트 핸들러가 요소에 추가될 때마다 jQuery는 이벤트가 요소에 바인딩될 때마다 이 후크를 호출합니다.

설정, 해제, 추가의 세 가지 후크가 있습니다. 각 후크가 수행하는 첫 번째 작업은 개체가 창 개체인지 여부를 감지한 다음 창 개체 자체에 크기 조정이 있으므로 창 개체에 따라 특별히 처리하는 것입니다. 이벤트

설정 훅에서 볼 수 있듯이 전체 이벤트 처리를 초기화할 때 요소 큐가 생성됩니다. 큐의 모든 요소는 너비와 높이를 데이터에 넣은 다음 250ms마다 루프 기능을 시작합니다. 변경 사항이 있는지 확인합니다. 변경 사항이 있는 경우 콜백 함수를 실행하고 데이터의 너비와 높이를 업데이트합니다

해제 후크에서 볼 수 있듯이 요소가 제거되면 요소 큐에서 해당 요소를 제거하고 요소의 데이터만 지우면 됩니다. 요소 큐의 마지막 요소인 경우 loopy는 계속 실행되지 않습니다

추가 후크에서 콜백 함수가 래핑됩니다

여기서 간단한 jQuery 사용자 정의 함수의 구현 메커니즘을 볼 수 있습니다