jQuery Events - Browser Events

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à  resizescroll.

.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).

Cú pháp
.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

Demo RUN
$(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 đó.

Cú pháp
.scroll( handler )

Hoặc

Cú pháp khá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/>
    freetuts.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.

Chương trình RUN
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ế.

Học jQuery từ căn bản đến nâng cao
Bạn đang tự học jQUery mà không có lộ trình? Vậy thì hãy tham khảo khóa học lập trình jQuery dành cho người mới bắt đầu này nhé, khá chi tiết và đầy đủ.
XEM NGAY

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 03: Thành thạo lập trình jquery qua 20 bài tập thực hành

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 19: Học lập trình Back-end PHP/MySql/Jquery nâng cao

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học jQuery từ cơ bản đến nâng cao

(Giảng viên: Nguyễn Đức Việt)

XEM

BÌNH LUẬN

Đặt câu hỏi: Hãy tham gia vào group học lập trình web để tham gia thảo luận và đặt câu hỏi, với hơn 30.000 thành viên hiện đang hoạt động tại group này. Ngoài ra bạn cũng có thể đặt câu hỏi nếu cần tư vấn về các vấn đề như định hướng nghề nghiệp, những khó khăn trong quá trình học tập.

Hỗ trợ việc làm: Hãy tham gia vào group việc làm công nghệ thông tin để tìm và đăng tuyển lập trình viên. Hy vọng đây sẽ là nơi tìm kiếm việc làm lý tưởng cho bạn và nhà tuyển dụng.