如何在 JavaScript 中触发窗口调整大小事件

发布于11月30日

我在窗口调整上注册了一个触发器.我想知道如何触发要调用的事件.例如，当隐藏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 has the trigger method，其工作原理如下:

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