Sự kiện resize() trong jQuery

1) Sự kiện resize() trong jQuery

- Sự kiện resize() xảy ra khi kích thước của cửa sổ trình duyệt bị thay đổi.

- Ví dụ: Trước tiên, bạn hãy bấm vào nút nằm ở góc phải phía trên của cửa sổ trình duyệt, sau đó kéo thả thay đổi kích thước của cửa sổ trình duyệt để xem sự kiện resize() xảy ra.

Số sự kiện resize() đã xảy ra: 0

2) Cách sử dụng sự kiện resize() trong jQuery

- Có hai trường hợp sử dụng sự kiện resize():

- Trường hợp 1: Khi sự kiện resize() xảy ra thì một chức năng sẽ được thực thi.

$(window).resize(function(){
    //đoạn mã sẽ được thực thi khi sự kiện resize() xảy ra
})

- Trường hợp 2: Kích hoạt sự kiện resize() cho một phần tử:

$(window).resize();

3) Một số ví dụ

Ví dụ:

- Khi sự kiện resize() xảy ra thì phần tử <span> sẽ cập nhật số lần sự kiện xảy ra.

<script>
    var a = 0;
    $(document).ready(function(){
        $(window).resize(function(){
            a = a + 1;
            $("span").html(a);
        });
    });
</script>

Xem ví dụ

Ví dụ:

- Khi phần tử <button> xảy ra sự kiện click() thì sự kiện resize() sẽ được kích hoạt.

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(window).resize();
        });
    });
</script>

Xem ví dụ