Home > Web > jQuery Events – Các sự kiện của trình duyệt

jQuery Events – Các sự kiện của trình duyệt

Các sự kiện của trình duyệt bao gồm :

  • .resize()
  • .scroll()
  • .error()

.resize()

Mô tả : Phương thức .resize() ràng buộc một event handler cho sự kiện resize của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

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

Cú pháp : 

  • .resize(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .resize([eventData],handler(eventObject)):
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được 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
  • .resize()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘resize’,handler) trong dạng đầu tiên và thứ hai, và .trigger() trong dạng thứ ba.

Sự kiện resize sẽ được gửi đến 1 phần tử window khi kích thước của cửa sổ trình duyệt thay đổi.

$(window).resize(function(){
    alert(‘Hàm .resize() được gọi’);
});

Đoạn code trên sẽ được thực thi mỗi khi người dùng thay đổi kích thước của cửa sổ trình duyệt.

Ví dụ sau sẽ hiển thị chiều rộng của cửa số trong khi hoặc sau khi nó thay đổi kích thước:

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

.scroll()

Mô tả : Phương thức .scroll() ràng buộc một event handler cho sự kiện scroll của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

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

Cú pháp : 

  • .scroll(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .scroll([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được 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
  • .scroll()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘scroll’,handler) trong dạng đầu tiên và thứ hai, và .trigger() trong dạng thứ ba.

Sự kiện scroll sẽ được gửi đến 1 phần tử khi người dùng cuộn đến một nơi khác trong phần tử đó.  Nó chấp nhận đối tượng window nhưng cũng áp dụng cho các frame và các thành phần có thể cuộn được với thuộc tính CSS overflow được thiết lập là scroll ( hoặc auto khi chiều rộng hoặc chiều cao được chỉ định của phần tử nhỏ hơn chiều rộng và chiều cao của nội dung của nó).

Ví dụ bạn có tài liệu HTML sau :

<div id="target" style="overflow: scroll; width: 200px; height: 100px;">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit
 esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui
 officia deserunt mollit anim id est laborum.
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Ở đây thẻ div với id = “target” có định dạng chỉ định (width:200px; height:100px) nhỏ hơn nội dung kích thước phần nội dung của nó nên nó có thể scroll.

Sự kiện scroll có thể được gắn cho phần tử này.

$('#target').scroll(function() {
    $('#log').append('<div>Handler for .scroll() called.</div>');
});

Mỗi khi người dùng cuộn nội dung lên hoặc xuống, một hoặc nhiều message sẽ được nối thêm vào thẻ <div id=”log”></div>

Để kích hoạt sự kiện bằng tay, bạn gọi .scroll() không có tham số :

$('#other').click(function() {
    $('#target').scroll();
});

Sau khi đoạn code này được thực thi, khi người dùng thực hiện click vào thẻ #other sẽ kích hoạt sự kiện scroll của #target.

Sự kiện scroll sẽ được kích hoạt bất cứ khi nào vị trí scroll thay đổi, không kể nguyên nhân gì. Click chuột hoặc kéo trên thanh scroll, kéo bên trong phần tử, ấn phím mũi tên hoặc sử dụng nút cuộn chuột sẽ đều gây ra sự kiện này.

Ví dụ : Thực hiện tác vụ khi trang được cuộn

<!DOCTYPE html>
<html>
<head>
   <style>
       div { color:blue; }
       p { color:green; }
       span { color:red; display:none; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
     <div>Try scrolling the iframe.</div>
     <p>Paragraph - <span>Scroll happened!</span></p>
     <script>
         $("p").clone().appendTo(document.body);
         $("p").clone().appendTo(document.body);
         $("p").clone().appendTo(document.body);
         $(window).scroll(function () { 
         $("span").css("display", "inline").fadeOut("slow"); 
      });
    </script>
</body>
</html>

.error()

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

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

Cú pháp : 

  • .error(handler(eventObject))
    • Tham số :
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .error([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được 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(‘error’,handler)

Sự kiện error sẽ được gửi đến 1 phần tử chẳng hạn như images được tham chiếu bởi một tài liệu và được load bởi trình duyệt. Nó sẽ được gọi nếu phần tử không được load đúng.

Ví dụ bạn có một page với 1 phần tử image đơn giản như sau :

<img alt=”Book” id=”book” />

Sự kiện có thể gắn cho image :

$('#book')
 .error(function() {
     alert('Handler for .error() called.')
 })
 .attr("src", "missing.png");

Nếu image không thể load ( ví dụ , bởi vì nó không được cung cấp URL ), thông báo “Handler for .error() called” sẽ xuất hiện.

Chú ý : event handler phải được gắn vào trước khi trình duyệt phát ra sự kiện lỗi, đó là lý do tại sao trong ví dụ thiết lập thuộc tính src sau khi thêm handler. Nếu không sự kiện error có thể không phát ra đúng khi trang ở server cục bộ, error dựa vào trạng thái code HTTP và nói chung sẽ không được kích hoạt nếu URL sử dụng phương thức file.

Sự kiện jQuery error không được gắn vào đối tượng window. Trình duyệt phát ra sự kiện error của window khi tìm thấy một lỗi script. Tuy nhiên sự kiện lỗi của window nhận nhiều tham số khác nhau và có nhiều giá trị trả về khác nhau hơn so với quy ước của event handler. Thay vào đó bạn có thể sử dụng window.onerrror.

Ví dụ : Để ẩn icon “broken image” cho người dùng IE, bạn có thể viết :

$("img")
 .error(function(){
     $(this).hide();
 })
 .attr("src", "missing.png");
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: