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

javascript jquery events

2022-08-29 23:29:00

我已经注册了一个触发器来调整窗口大小。我想知道如何触发要调用的事件。例如，当隐藏 div 时，我希望调用我的触发器函数。

我发现可以触发该功能，但是还有其他解决方案吗？window.resizeTo()

答案 1

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

答案 2

在可能的情况下，我更喜欢调用函数而不是调度事件。如果您能够控制要运行的代码，这可以很好地工作，但请参阅下面的代码，了解您不拥有该代码的情况。

window.onresize = doALoadOfStuff;

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

在此示例中，可以在不调度事件的情况下调用函数。doALoadOfStuff

在现代浏览器中，您可以使用以下命令触发事件：

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

这在Internet Explorer中不起作用，您必须在Internet Explorer中进行长手操作：

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

jQuery有触发方法，其工作原理如下：

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