调整大小事件

类别: 事件 > 浏览器事件
将事件处理程序绑定到“resize”事件，或在元素上触发该事件。

内容

.on( "resize" [, eventData ], handler )返回值: jQuery

描述: 将事件处理程序绑定到“resize”事件。

此页面描述了 resize 事件。有关已弃用的 .resize() 方法，请参见 .resize()。

当浏览器窗口的大小发生变化时，resize 事件将发送到 window 元素。

1
2
3
 
$( window ).on( "resize", function() {
  $( "#log" ).append( "<div>Handler for `resize` called.</div>" );
} );

现在，每当浏览器窗口的大小发生变化时，消息将被追加到 <div id="log"> 中，次数取决于浏览器。

resize 处理程序中的代码永远不应该依赖于处理程序被调用的次数。根据实现，resize 事件可以在调整大小过程中连续发送（Internet Explorer 和基于 WebKit 的浏览器（如 Safari 和 Chrome）中的典型行为），或者仅在调整大小操作结束时发送一次（某些其他浏览器（如 Opera）中的典型行为）。

示例

要查看窗口在调整大小时（或之后）的宽度，请尝试

1
2
3
 
$( window ).on( "resize", function() {
  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
} );