Home > Web > jQuery Events – Sự kiện khi tải tài liệu

jQuery Events – Sự kiện khi tải tài liệu

Các sự kiện liên quan đến việc tải tài liệu gồm có :

  • .ready()
  • .load()
  • .unload()

.ready()

Mô tả : Phương thức .ready() chỉ định một hàm sẽ thực thi khi DOM được load xong.

Kiểu trả về : đối tượng jQuery

Cú pháp : .ready(handler)

  • Tham số :
    • handler : hàm thực thi khi DOM đã sẵn sàng

Phiên bản được thêm vào : 1.0

JavaScript cung cấp sự kiện load để thực thi code khi trang được tải xong. Sự kiện này không được kích hoạt cho đến khi tất cả tài nguyên (VD: ảnh, …) được nhận xong. Trong đa số trường hợp, phương thức này có thể chạy nhanh như khi DOM được tạo xong.

Phương thức .ready() đảm bảo tác vụ được thực thi sau khi DOM đã sẵn sàng, do đó nó thường được sử dụng để nắm giữ tất cả các event handlers khác và chạy code jQuery khác.

Để đảm bảo trang vẫn được định dạng, một điều quan trong là cần tham chiếu đến file stylesheets ngoài hoặc nhúng thành phần style trước khi tham chiếu đến các scripts.

Trong trường hợp bạn muốn code được thực thi khi tất cả các tài nguyên được load xong ( chẳng hạn nếu kích thước của một ảnh là yêu cầu bắt buộc ), bạn có thể sử dụng phương thức .load() thay cho .ready().

Phương thức .ready nói chung không hoàn toàn giống với thuộc tính <body onload=””>. Nếu đã sử dụng phương thức load() thì không sử dụng .ready() nữa hoặc sử dụng phương thức .load() của jQuery để gắn kết sự kiện load cho window hoặc một item được chỉ định chẳng hạn như images.

Ba cú pháp sử dụng .ready() sau là tương đương nhau :

  • $(document).ready(handler)
  • $().ready(handler) ( không khuyến khích cách này )
  • $(handler)

Phương thức .ready() thường được sử dụng với một hàm nặc danh ( anonymous function )

$(document).ready(fuction(){
    // Handler for .ready() called
});

Tương đương với

$(function(){
    // Handler for .ready() called
});

Nếu .ready() được gọi sau khi DOM đã được khởi tạo, handler mới được truyền vào sẽ được thực thi ngay lập tức

Alias của namespace jQuery

Khi sử dụng cùng một thư viện JavaScript khác, chúng ta gọi $.noConflict() để tránh sự khác nhau giữa các namepace. Khi hàm này được gọi, cách viết tắt $ không còn được chấp nhận, bắt buộc chúng ta phải viết jQuery mỗi khi chúng ta muốn viết $. Tuy nhiên, handler truyền vào hàm .ready() có thể mang một tham số, cái mà được truyền như là đối tượng jQuery toàn cục. Điều này có nghĩa là chúng ta có thể đổi tên đối tượng bên trong phạm vi của hàm .ready() mà không làm ảnh hưởng đến code khác :

jQuery(document).ready(function($){
    // Code sử dụng $ như bình thường
});

Ví dụ : Hiển thị một thông báo khi DOM load xong

$(document).ready(function(){
     $(“p”).text(“DOM đã load xong và sẵn sàng để thao tác”);
});

.load()

Mô tả : Phương thức .load() ràng buộc một event handler cho sự kiện “load” của JavaScritp

Kiểu trả về : đối tượng jQuery.

Cú pháp : 

  • .load(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm thực thi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .load([eventData],handler(eventObject))
    • Tham số :
      • eventData : một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3

Đây là cách gọi tắt của phương thức .bind(‘load’,handler)

Sự kiện load sẽ được gửi đến 1 phần tử khi nó và tất cả các thành phần con của nó đã được load xong. Sự kiện này có thể gửi đến bất kỳ thành phần liên quan vào với một URL như : images, scripts, frames, iframes, và window object.

Nói chung là không cần thiết phải đợi cho tất cả các images được load xong. Nếu bạn muốn code được thực thi sớm hơn, bạn có thể sử dụng phương thức .ready()

Module Ajax cũng có một phương thức tên là .load().

Ví dụ 1: Giả sử  bạn có 1 page chứa một ảnh :

<img src=”book.png” alt=”Book” id=”book” />

Để thực hiện một tác vụ vào đó khi ảnh được tải xong, bạn có thể viết:

$(‘#book’).load(function(){
    // code thực thi khi ảnh được tải xong
});

Ví dụ 2: Thực thi một hàm khi trang được tải xong

$(window).load(function () {
    // run code
});

Ví dụ 3 : Thêm class bigImg vào tất cả các ảnh với height > 100 cho mỗi ảnh được tải xong

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
})

.unload()

Mô tả : Gắn một event handler cho sự kiện “unload” của JavaScript

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .unload(handler(eventObjects))
    • Tham số :
      • handler(eventObject) : một hàm thực thi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .unload([eventData],handler(eventObject))
    • Tham số :
      • eventData : Một sơ đồ dữ liệu được truyền vào event handler
      • handler(eventObject) : Một hàm sẽ thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3

Đây là cách gọi tắt của phương thức .bind(‘unload’,handler)

Sự kiện unload sẽ được gửi đến thành phần window khi người dùng rời khỏi trang bằng cách click vào một link rời khỏi trang, hoặc gõ một địa chỉ URL mới trên thanh địa chỉ. Nút forward và back sẽ kích hoạt sự kiện này. Đóng cửa sổ trình duyệt là một nguyên nhân sự kiện này được kích hoạt. Sự kiện tải lại trang trước tiên sẽ tạo một sự kiện unload.

Lưu ý : Sự điều khiển sự kiện unload có thể khác nhau giữa các phiên bản của trình duyệt. Ví dụ : một số phiên bản của Firefox kích hoạt sự kiện khi một click vào một link , nhưng khi đóng cửa sổ thì không. Trên thực tế, các hành vi cần được kiểm tra trên tất cả các trình duyệt xem có hỗ trợ hay không, và đối chiếu với sự kiện beforeunload().

Bất kỳ sự kiện unload nào cũng được gắn với đối tượng window:

$(window).unload(function() {
    alert('Sự kiện .unload() được gọi');
});

Sau khi đoạn code này được thực thi, thông báo sẽ hiển thị bất cứ khi nào trình duyệt rời khỏi trang hiện tại. Không thể thoát khỏi sự kiện unload khi gọi phương thức .preventDefault(). Sự kiện này luôn sẵn sàng do đó script sẽ được thực thi ngay khi người dùng rời khỏi trang.

Ví dụ : Hiển thị thông báo khi một trang unload

$(window).unload(function(){
    alert(“Bye now!”);
});

 

Advertisements
Categories: Web
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: