[javascript] JavaScript에서 창 크기 조정 이벤트를 트리거하는 방법은 무엇입니까?

가능한 경우 이벤트를 전달하는 대신 함수를 호출하는 것을 선호합니다. 실행하려는 코드를 제어 할 수 있으면 잘 작동하지만 코드를 소유하지 않은 경우 아래를 참조하십시오.

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

이 예에서는 doALoadOfStuff이벤트를 전달하지 않고 함수를 호출 할 수 있습니다 .

최신 브라우저에서 다음을 사용 하여 이벤트 를 트리거 할 수 있습니다 .

window.dispatchEvent(new Event('resize'));

Internet Explorer에서는 작동하지 않으므로 오랫동안 사용해야합니다.

var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);

jQuery에는 다음trigger 과 같은 방법 이 있습니다.

$(window).trigger('resize');

그리고주의 사항이 있습니다.

.trigger ()는 합성 된 이벤트 객체로 완성 된 이벤트 활성화를 시뮬레이션하지만 자연 발생 이벤트를 완벽하게 복제하지는 않습니다.

특정 요소에서 이벤트를 시뮬레이션 할 수도 있습니다.

function simulateClick(id) {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });

  var elem = document.getElementById(id);

  return elem.dispatchEvent(event);
}

답변

window.dispatchEvent(new Event('resize'));

$(window).trigger('resize');

var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);

$timeout(function() {
    var evt = $window.document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false, $window, 0);
    $window.dispatchEvent(evt);
});

if (typeof(Event) === 'function') {
  // modern browsers
  window.dispatchEvent(new Event('resize'));
} else {
  // for IE and other old browsers
  // causes deprecation warning on modern browsers
  var evt = window.document.createEvent('UIEvents');
  evt.initUIEvent('resize', true, false, window, 0);
  window.dispatchEvent(evt);
}

$(window).bind('resize', function () {
    resizeElements();
}).trigger('resize');

$(window).resize();