如何在jQuery中触发窗口尺寸调整事件

在这篇文章中，我们将讨论如何使用jQuery来触发窗口调整大小的事件。为此目的，我们将使用jQuery提供的以下库函数。

$(<element>).trigger() 这个库函数允许我们同时触发本地和自定义的事件。该方法可以独立使用，也可以由其他事件启动。在这种情况下，我们将使用本地的JavaScript事件 “resize”，以便根据我们的方便来触发调整大小的事件。语法是：$(window).trigger('resize')。
$(<element>).resize() 该方法用于监听调整大小的事件。该方法可以接受回调函数作为参数，一旦遇到调整大小的事件，这些函数将被执行。

jQuery CDN链接：

<script src=”https://code.jquery.com/jquery-3.5.1.min.js” integrity=”sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=” crossorigin=”anonymous”></script>

在这里，为了便于理解，调整大小事件将在一个按钮上触发。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
  
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0">
  
    <script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
        integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <button id="res" style="
                background-color: green;
                color: white;
                font-size: 30px;
                border: none;
                border-radius: 28px;
                width: 200px;
                height: 100px;
                outline: none;
                cursor: pointer;">
        Resize
    </button>
    <br>
      
    <p id="gfg" style>
         (for Geeks For Geeks)
    </p>
  
    <script>
        (document).ready(() => {
            ('#res').on('click', () => {
                (window).trigger('resize');
            });
            (window).resize(() => {
                console.log("resize function called");
            })
        });
    </script>
</body>
  
</html>