BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Top