Trigger the handler  

Để khi click vào trường thứ nhất hoặc dùng phím Tab focus vào nó từ một trường khác sẽ hiển thị lên thông báo, bạn có thể viết :

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

Chúng ta cũng có thể kích hoạt sự kiện focus của phần tử

target khi một phần tử khác được click bằng cách :

$['

other'].click[function[] {

$['

# target'].focus[];

}];

Sự kiện focus không hoạt động trong IE. Do đó, các script phụ thuộc vào sự kiện ủy quyền của sự kiện focus sẽ không tương thích với mọi trình duyệt. Tuy nhiên từ phiên bản 1.4.2, jQuery đã hạn chế điều này bằng cách map sự kiện focus với sự kiện focusin trong các phương thức ủy quyền của nó, .live[] và .delegate[]

Ví dụ 1: Khi thẻ input được focus, thực hiện thêm thuộc tính css cho thẻ span kế tiếp

span {display:none;}  
  

 focus fire
  
 focus fire
  
  
    $["input"].focus[function [] {  
         $[this].next["span"].css['display','inline'].fadeOut[1000];  
    }];  
  

Ví dụ 2: Ngăn người dùng gõ tiếp vào input text

$["input[type=text]"].focus[function[]{

$[this].blur[];  

Ví dụ 3: Focus vào input login với id ‘login’ khi trang được load

$[document].ready[function[]{

$["

.blur[]

Mô tả : Phương thức .blur[] ràng buộc một event handler cho sự kiện blur 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 :

• .blur[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
• .blur[[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
• .blur[]
  • 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[‘blur’,handler] trong hai dạng đầu, và .trigger[‘blur] trong dạng thứ ba.

Sự kiện blur sẽ được gửi đến 1 phần tử khi nó bị mất focus. Đầu tiên sự kiện này chỉ được chấp nhận cho các phần tử form chẳng hạn như thẻ . Trong các trình duyệt gần đây, phạm vi của sự kiện được mở rộng đến tất cả các loại phần tử. Một phần tử có thể bị mất focus thông qua lệnh từ bàn phím, chẳng hạn như phím Tab, hoặc bằng cách click chuột ra một chỗ khác trên trang.

Ví dụ, xem xét tài liệu HTML sau :

Trigger the handler  

Để gắn sự kiện .blur cho

target :

$['

target'].blur[function[] {

alert['Handler for .blur[] called.'];  

}];

Bây giờ nếu thẻ input đầu tiên có focus thì khi người dùng click ra một nơi khác hoặc ấn phím Tab chuyển đến 1 phần tử khác thì sẽ hiện lên thông báo “Handler for .blur[] called”]

Để kích hoạt sự kiện một cách tự động, bạn có thể gọi .blur[] không có tham số. Đoạn code sau có tác dụng khi người dùng click vào

other thì sự kiện .blur của

target sẽ được kích hoạt.

$['

other'].click[function[] {

$['

# target'].blur[];

}];

Sự kiện blur không hoạt động trong IE. Do đó, các script phụ thuộc vào sự kiện ủy quyền của sự kiện blur sẽ không tương thích với mọi trình duyệt. Tuy nhiên từ phiên bản 1.4.2, jQuery đã hạn chế điều này bằng cách map sự kiện blur với sự kiện focusout trong các phương thức ủy quyền của nó, .live[] và .delegate[]

Ví dụ: Kích hoạt sự kiện blur trên tất cả các đoạn văn :

$["p"].blur[];

.change[]

Mô tả : Phương thức .change[] ràng buộc một event handler cho sự kiện change 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 :

• .change[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
• .change[[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
• .change[]
  • 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[‘change’,handler] trong hai dạng đầu, và .trigger[‘change’] trong dạng thứ ba.

Sự kiện change sẽ được gửi đến 1 phần tử khi giá trị của nó thay đổi.Sự kiện này chỉ được chấp nhận cho các phần tử , , . Đối với select boxes, checkboxes, và các radio button , sự kiện được phát ra ngay khi người dùng tạo một lựa chọn với chuột nhưng đối với các loại phần tử khác, sự kiện này được hoãn cho đến khi phần tử bị mất focus.

Ví dụ, xem xét tài liệu HTML sau :

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

0

Sự kiện .change[] có thể được gắn cho text input và select box như sau :

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

1

Bây giờ nếu lựa chọn thứ hai được chọn từ dropdown, câu thông báo sẽ hiện ra. Nó cũng sẽ hiện ra nếu bạn thay đổi giá trị trong ô text rồi click ra đâu đó. Nếu ô text bị mất focus mà nội dung không bị thay đổi thì sự kiện không được kích hoạt.

Để kích hoạt sự kiện bằng tay, hãy gọi .change[] không có tham số.

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

2

Khi đoạn code này được thực thi, người dùng click vào

other sẽ hiện lên thông báo “Handler for .change[] called.”. Message này sẽ hiển thị 2 lần bởi vì handler gắn sự kiện .change[] cho cả hai phần tử trong form.

Từ phiên bản jQuery 1.4, sự kiện change[] hoạt động trên IE, và phù hợp với nhiều trình duyệt khác.

Ví dụ 1: Gắn kết sự kiện .change[] cho select box lấy giá trị text của mỗi option được chọn và viết chúng trong thẻ div. Sau đó sẽ kích hoạt sự kiện để vẽ text vào.

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

3

Ví dụ 2 : Kiểm tra giá trị hợp lệ khi thêm text vào tất cả các phần tử input text.

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

4

.select[]

Mô tả : Phương thức .select[] ràng buộc một event handler cho sự kiện select 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 :

• .select[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
• .select[[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
• .select[]
  • 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[‘select’,handler] trong hai dạng đầu, và .trigger[‘select’] trong dạng thứ ba.

Sự kiện select sẽ được gửi đến 1 phần tử khi người dụng tạo một lựa chọn text bên trong nó.Sự kiện này chỉ được chấp nhận cho các trường và .

Ví dụ, xem xét tài liệu HTML sau :

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

5

Sự kiện .select[] có thể được gắn cho text input như sau :

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

6

Bây giờ bất kỳ thành phần nào của text được chọn sẽ hiện lên thông báo. Nếu chỉ đơn thuần thiết lập vị trí của điểm chèn thì sẽ không kích hoạt sự kiện.

Để kích hoạt sự kiện bằng tay, hãy gọi .select[] không có tham số :

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

7

Khi đoạn code này được thực thi, người dùng click vào

other sẽ hiện lên thông báo “Handler for .select[] called.”. Ngoài ra, hành động select mặc định trên trường text được phát ra, do đó toàn bộ nội dung text trong thẻ

target sẽ được chọn.

Chú ý : Phương thức nhận giá trị text được chọn hiện tại có thể khác nhau giữa các trình duyệt. Một số plugin jQuery cung cấp giải pháp khắc phục vấn đề này.

Ví dụ 1: Thực hiện tác vụ khi text bên trong 1 hộp input được chọn

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

8

Ví dụ 2 : Kích hoạt sự kiện select trên tất cả các thành phần input:

$[“input”].select[];

.submit[]

Mô tả : Phương thức .submit[] ràng buộc một event handler cho sự kiện submit 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 :

• .submit[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
• .submit[[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
• .submit[]
  • 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[‘submit’,handler] trong hai dạng đầu, và .trigger[‘submit’] trong dạng thứ ba.

Sự kiện submit sẽ được gửi đến 1 phần tử khi người dùng cố gắng đệ trình [submit] một form. Sự kiện này chỉ được chấp nhận cho thẻ . Forms có thể được submit bằng cách click vào một thẻ , hay hoặc ấn Enter khi một phần tử nào đó của form đang có focus.

Chú ý : Tùy vào trình duyệt, phím Enter có thể gây ra một hành động submit form nếu form có chính xác một trường text hoặc chỉ khi có một nút submit. Giao diện có thể không phản ứng gì với hành vi của phím này trừ khi vấn đề được kiểm soát bởi sự kiện ấn phím Enter.

Ví dụ, xem xét tài liệu HTML sau :

$['

target'].focus[function[] {

alert['Handler for .focus[] called.'];  

}];

9

Sự kiện .submit[] có thể được gắn cho form như sau :

$['

other'].click[function[] {

$['

# target'].focus[];

}];

0

Bây giờ khi form được submit sẽ hiện lên thông báo. Việc này xảy ra trước sự submit thực sự, cho nên chúng ta có thể thoát [cancel] hành động submit bằng cách gọi phương thức .preventDefault[] của đối tượng event hoặc return false từ handler của chúng ta.

Chúng ta cũng có thể kích hoạt sự kiện bằng tay khi một thành phần khác được click :

$['

other'].click[function[] {

$['

# target'].focus[];

}];

0

Khi đoạn code này được thực thi, người dùng click vào

other sẽ hiện lên thông báo “Handler for .submit[] called.”. Ngoài ra, hành động submit mặc định trên trường form được phát ra, do đó form sẽ được submit.

Chú ý : Sự kiện submit của JavaScript không hoạt động trong IE. Tuy nhiên, script dựa vào sự ủy quyền của sự kiện submit sẽ hoạt động trên các trình duyệt dựa vào jQuery từ phiên bản 1.4 bởi jQuery đã chuẩn hóa hành vi của sự kiện

Ghi chú thêm: Form và các phần tử con của nó không được đặt thuộc tính name hay id xung đột với các thuộc tính của form chẳng hạn như submit, length hay method. Xung đột tên có thể dẫn đến các lỗi khó hiểu.