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

창 크기 조정에 트리거를 등록했습니다. 이벤트를 호출하는 방법을 알고 싶습니다. 예를 들어 div를 숨길 때 트리거 함수를 호출하고 싶습니다.

내가 발견 window.resizeTo()기능을 실행할 수 있지만, 다른 솔루션은 무엇입니까?



답변

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

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'));


답변

jQuery를 사용하면 트리거 를 호출 할 수 있습니다 .

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


답변

IE에서도 작동하는 순수한 JS ( @Manfred comment )

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);
});


답변

모든 브라우저를 포괄하고 경고를 유발하지 않도록 pomber와 avetisk의 답변을 결합한 경우 :

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);
}


답변

실제로 위의 솔루션 으로이 작업을 수행 할 수 없었습니다. jQuery로 이벤트를 바인딩하면 다음과 같이 정상적으로 작동합니다.

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


답변

다만

$(window).resize();

당신이 요구하는 것을 오해하지 않는 한 내가 사용하는 것입니다.