JavaScript: Giới thiệu về sự kiện
Sự kiện vốn dĩ là một phần của hầu hết các trang web và chúng làm cho các trang web trở nên dễ tương tác hơn và có tính động hơn. Các sự kiện JavaScript là không đồng bộ có nghĩa là chúng có thể xảy ra ở bất kỳ thời gian nào. Chúng là những hành động được khởi tạo bởi người dùng viếng thăm trang web của ta; ví dụ như nếu người dùng submit một form hoặc di chuyển chuột chạm vào link hay ảnh, thì những điều này đều có thể kích hoạt sự kiện. Khi một sự kiện xảy ra thì JavaScript có thể thực thi mã lệnh để hồi đáp lại hành động của người dùng. Như đã nói, nếu người dùng nhấn nút submit thì JavaScript có thể kiểm tra xem dữ liệu trong form có được điền đúng yêu cầu hay chưa; hoặc nếu con trỏ chuột chạm vào (over) một đường link thì JavaScript có thể thay ảnh link bằng một ảnh mới chẳng hạn. Sự phản hồi của JavaScript đối với một trong các sự kiện này của người dùng được gọi là xử lý sự kiện (event handling). Nếu người dùng nhấn một nút lệnh chẳng hạn thì JavaScript có thể xử lý sự kiện bằng cách gọi một hàm để giải quyết một số tác vụ chỉ định, như là mở một cửa sổ mới hoặc focus vào cửa sổ hoặc submit một form đã điền dữ liệu đầy đủ và hợp lệ.
Sự kiện được khởi tạo bởi người dùng. Sự kiện có thể là blur, click, change, ... Bộ xử lý sự kiện bất kỳ của một thẻ HTML bất kỳ bao giờ cũng bắt đầu bằng "on". Ví dụ như onBlur và onClick là những thuộc tính sự kiện của một thẻ HTML, và ta dùng để xử lý sự kiện tương ứng cho phù hợp.
Các bộ xử lý JavaScript không nằm trong thẻ <script></script>, chúng là những thuộc tính sự kiện của các thẻ HTML. Nếu sự kiện được liên kết với một thẻ <form> và nếu được liên kết với một link thì nó sẽ là thuộc tính của thẻ <a href>, ... Chuỗi được gán cho bộ xử lý sự kiện là câu lệnh mà sẽ được thực thi khi sự kiện được người dùng kích hoạt. Câu lệnh là một hàm JavaScript được xây dựng sẵn. Hàm sẽ được gọi khi sự kiện được kích hoạt.
Mỗi thuộc tính hay phương thức thì đều được kết hợp với một đối tượng đơn, các sự kiện lại thường được kết hợp với một tập hợp các đối tượng. Chẳng hạn như bộ xử lý sự kiện onClick có thể được kết hợp với thẻ <input> của form, nhưng cũng có thể được liên kết với thẻ link <a>, hoặc một ảnh, hay bản đồ ảnh, nút lệnh, ...
(Lưu ý là bộ xử lý sự kiện bạn có thể viết hoa hay thường trong thẻ HTML đều được, trừ khi nó được sử dụng như một phương thức trong JavaScript, chẳng hạn như onClick hay onclick thì đều như nhau ở trong các thẻ HTML).
Xét một ví dụ sau:
<form> <input type="button" value="Wake me" onClick="wakeupCall()"> </form>
Thẻ <form> ở ví dụ trên chứa một thẻ <input> với ba thuộc tính là type, value, và onClick, trong đó type là một "button"; giá trị là "Wake me", và bộ xử lý sự kiện là onClick gọi đến hàm "wakeupCall()". Khi người dùng click nào nút lệnh có nhãn "Wake me", thì sự kiện onClick được kích hoạt và hàm wakeupCall() sẽ được thực thi. Ví dụ hoàn chỉnh bạn xem dưới đây.
<html>
<head><title>Wake up call</title>
1 <script language="javascript">
2 function wakeupCall(){ // Hàm được định nghĩa ở đây
3 setTimeout('alert("Time to get up!")',5000);
}
4 </script>
5 </head>
<body bgcolor="lightblue">
6 <form>
7 <input type="button"
8 value="Wake me"
9 onClick="wakeupCall()">
</form> </body> </html>
GIẢI THÍCH
1. Điểm bắt đầu của chương trình JavaScript.
2. Hàm được định nghĩa trong JavaScript. Khi người dùng click vào nút lệnh của form thì hàm sẽ được gọi vì nó nằm trong sự kiện onClick. Ở đây bạn thấy một điều là mặc dù hàm được định nghĩa trong JavaScript nhưng nó lại có thể được gọi ở ngoài chương trình JavaScript.
3. Thời gian được đặt là 5.000 mini giây. Hộp thông báo sẽ hiển thị ra màn hình sau khi người dùng click vào nút lệnh 5 giây.
4. Kết thúc chương trình JavaScript.
5. Thẻ đóng </head>.
6. Thẻ mở <form>.
7. Nút lệnh của form>
8. Nhãn của nút lệnh.
9. Sự kiện gọi đến hàm JavaScript. Khi người dùng nhấn nút lệnh thì bộ xử lý sự kiện sẽ được gọi.
Dưới đây là danh sách các bộ xử lý sự kiện và cách hoạt động của chúng.
Các sự kiện JavaScript, áp dụng và hoạt động |
||
|---|---|---|
|
Bộ xử lý sự kiện |
Áp dụng |
Hoạt động |
|
onAbort |
Các ảnh (Image) |
Khi không tải ảnh được. |
|
onBlur |
Cửa sổ (Window), các frame, tất cả các đối tượng form |
Khi không còn focus vào đối tượng hiện thời nữa, ví dụ như khi rời khỏi textfield. |
|
onChange |
Input, select, và text area |
Khi người dùng thay đổi giá trị của phần tử tử, thường dùng cho validation form. |
|
onClick |
Link, button, các đối tượng form, bản đồ ảnh |
Khi người dùng click vào một đối tượng, trả về false sẽ hủy hành động mặc định của đối tượng đó. |
|
onDblClick |
Các link, button và đối tượng form |
Khi người dùng click đúp (double-click) vào đối tượng. |
|
onDragDrop |
Window |
Khi người dùng thả đối tượng (tập tin chẳng hạn) vào cửa sổ trình duyệt. |
|
onError |
Script |
Khi một lỗi JavaScript xảy ra, ví dụ như lỗi cú pháp. |
|
onFocus |
Các Window, frame và tất cả các đối tượng form |
Khi focus vào một cửa sổ hay một frame hay một đối tượng form nào đó (không focus được vào đối tượng ẩn hay disabled). |
|
onKeyDown |
Các document, ảnh, link, form |
Khi nhấn một phím bất kỳ của bàn phím xuống. |
|
onKeyPress |
Document, ảnh, link, form |
Khi một phím bất kỳ trên bàn phím được nhấn và nhả. |
|
onKeyUp |
Document, ảnh, link, form |
Khi nhả một phím bất kỳ trên bàn phím ra (không nhấn xuống nữa. |
|
onLoad |
Body, frameset, ảnh |
Sau trang web hoặc ảnh được tải. |
|
onMouseOut |
Các link (và ảnh trong link) |
Khi di chuyển chuột rời khởi link. |
|
onMouseOver |
Các link (và ảnh trong link) |
Khi di chuyển chuột chạm vào đối tượng. Trả về true sẽ không cho link hiển thị ở thanh trạng thái. |
|
onMove |
Window |
Khi di chuyển cửa sổ trình duyệt. |
|
onReset |
Nút lệnh reset của form |
Khi nhấn nút reset của form. Trả về false sẽ dừng reset. |
|
onResize |
Window |
Khi thay đối kích cỡ của cửa sổ trình duyệt. |
|
onSelect |
Các phần tử form |
Khi chọn một phần tử form nào đó. |
|
onSubmit |
Form |
Khi nhấn vào nút lệnh submit của form. Trả về false sẽ không gửi được dữ liệu tới server nữa. |
|
onUnload |
Body, frameset |
Sau khi đóng hoặc reset trang web hoặc frameset. |