jQuery Events - Browser Events - jQuery căn bản

Trong bài này mình sẽ trình bày về 2 sự kiện trong jQuery liên quan đến các hành động trên trình duyệt browser, đó là  resize và scroll.

.resize()

Sự kiện này xảy ra khi bạn thay đổi kích thước của trang web. Ví dụ khi bạn thu nhỏ trình duyệt lại thì sự kiện này sẽ được kích hoạt vì trang web đã bị gom nhỏ lại (trường hợp bạn không thiết lập with cố định).

.resize( handler )

Ngoài cú pháp này ra thì bạn có thể sử dụng sự kiện on.

.on("resize", handler);

Trong đó handler là một hàm sẽ được gọi khi sự kiện kích hoạt.

Sự kiện này cũng hay được dùng trong quá trình xây dựng responsive. Với những trình duyệt cũ không chạy được CSS3 thì ta có thể bỏ qua, nhưng khách hàng thì họ không muốn như vậy ;) vì vậy ta phải kết hợp thêm JS  để kiểm tra kích thước của trình duyệt để từ đó bổ sung thêm CSS cho phù hợp, đương nhiên việc bổ sung CSS cũng phải sử dụng Javascript.

Có nhiều bạn hiểu lầm là kích thước của trình duyệt, nhưng thực chất sự kiện này áp dụng cho kích thước của đối tượng đang nhắm tới. Ví dụ window thì đó là trang web.

Ví dụ: Thông báo chiều rộng của trang web khi resize

$(window).resize(function () {
$("body").prepend("<div>" + $(window).width() + "</div>");
});

.scroll()

Sự kiện xảy ra khi bạn di chuyển đối tượng lên hoặc xuống. Ví dụ khi trang web quá dài thì sẽ bị ẩn phía dưới, lúc này bạn phải sử dụng chức năng scroll của trình duyệt để kéo xuống => sự kiện được kích hoạt cho đối tượng window. Trường hợp bạn thiết lập overflow là scroll cho một thẻ HTML nào đó thì khi bạn thực hiện thao tác kéo lên hoặc xuống thì sự kiện được kích hoạt cho đối tượng HTML đó.

.scroll( handler )

Hoặc

.on( "scroll", handler )

Trong đó handler là một hàm sẽ được gọi khi sự kiện được kích hoạt.

Sự kiện này thường dùng khi bạn xây dựng ứng dụng phân trang bằng ajax (scrolling pagination), nghĩa là sẽ load thêm data khi bạn kéo xuống gần phía dưới. Như facebook hay các trang như zing cũng đều sử dụng chức năng này.

Ví dụ: Cho một đoạn mã html như sau.

<div id="wrapper" style="width: 200px;height: 200px;overflow: scroll;">
    xin <br/>
    chào<br/>
    các<br/>
    bạn<br/>
    chào<br/>
    mừng<br/>
    bạn<br/>
    đến<br/>
    với<br/>
    Zaidap.com.net<br/>
    Chúc<br/>
    các<br/>
    bạn<br/>
    học<br/>
    tốt
</div>
<div id="result">

</div>

Bây giờ mình sẽ viết chương trình bắt sự kiện khi bạn scroll nội dung bên trong thẻ div#wrapper.

var time = 0;
$(document).ready(function(){
    $('#wrapper').scroll(function(){
        time++;
        $('#result').html("Bạn đang scroll lần thứ " + time);
    });
});

Lời kết

Như vậy qua bài này mình đã giới thiệu xong 2 sự kiện thường dùng thuộc vào nhóm browser events. Cả 2 sự kiện này được sử dụng rất nhiều khi các bạn làm dự án thực tế.