142
Tập hợp các sự kiện tương ứng với các phần tử khác nhau trên trang là một phần của
mô hình đối tượng tài liệu (Document Object Model), chứ không phải của JavaScript.
Nghĩa là, các sự kiện được một phần tử nào đó hỗ trợ có thể khác nhau trên các trình
duyệt.
Sau đây là một số sự kiện thường được hầu hết các đối tượng hỗ trợ:
¾ onClick
Sự kiện onClick được tạo ra bất cứ khi nào người dùng nhấp chuột lên các phần tử
form nào đó (button, checkbox, radio button, và phần tử select), hoặc lên các
hyperlink.
Ví dụ 1:
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
function compute(form)
{
if (confirm(“Are you sure?”))
form.kết quả.value = eval(form.expr.value)
else
alert(“Please come back again.”)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE=”text” NAME=”expr” SIZE=15 ><BR><BR>
<INPUT TYPE=”button” VALUE=”Calculate” ONCLICK=”compute(this.form)”>
<BR><BR><BR>
Kết quả:
<INPUT TYPE=”text” NAME=”kết quả” SIZE=15 >
<BR>
</FORM>
</BODY>
</HTML>
143
Hình 7.1: Kết quả của ví dụ 1
¾ onChange
Sự kiện onChange xảy ra bất cứ khi nào một phần tử form thay đổi. Điều này có
thể xảy ra khi nội dung của một trường văn bản thay đổi, hoặc khi một chọn lựa
trong danh sách chọn lựa thay đổi. Tuy nhiên, sự kiện onChange không được tạo ra
khi một radio button hoặc một checkbox được nhấp. Thay vào đó, sự kiện onClick
sẽđược tạo ra.
Sự kiện onChange được gửi đi khi một phần tử hoàn tất việc thay đổi. Vì vậy, khi
một textbox đang được hiệu chỉnh, sự kiện onChange chỉ được phát sinh sau khi
việc hiệu chỉnh đã hoàn tất, và khi người dùng thoát khỏi textbox đó.
Ví dụ 2:
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!— hide script from old browsers
function checkNum(num)
{
if (num == “”)
{
alert(“Please enter a number”);
return false;
}
if (isNaN (num))
{
144
return false;
}
else alert (“Thank you”);
}
// end hiding from old browsers –>
</SCRIPT>
</HEAD>
<BODY bgColor = white>
<FORM>
Please enter a number:
<INPUT type = text size = 5 onChange=”checkNum(this.value)”>
</FORM>
</BODY>
</HTML>
Hình 7.2(1) và 17.2(2) minh hoạ kết quả của đoạn mã trong ví dụ 2.
145
Nếu chúng ta nhập vào một giá trị số:
Hình 7.2: Kết quả của ví dụ 2(2)
¾ onFocus
Sự kiện onFocus được gửi đi bất cứ khi nào một phần tử form trở thành phần tử
hiện thời. Chỉ khi một phần tử nhận được focus nó mới nhận được input từ người
dùng. Điều này có thể xảy ra khi người dùng nhấp chuột lên phần tử, hoặc sử dụng
phím Tab hoặc Shift+Tab (di chuyển tớI các phần tử trên form).
¾ onBlur
Blur ngược với focus. Khi người dùng rời khỏi một phần tử trên form, sự kiện
onBlur được kích hoạt. Đối với một số phần tử, nếu nội dung của nó cũng bị thay
đổi, thì sự kiện onChange cũng được kích hoạt.
Ví dụ 3:
<HTML>
<BODY BGCOLOR=”lavender”>
<FORM>
<INPUT type = text name = text1
onblur=”(document.bgColor=’aqua’)”
onfocus=”(document.bgColor=’dimgray’)”>
</FORM>
</BODY>
146
</HTML>
Khi textbox nhận được focus, màu nền sẽ chuyển sang DIMGRAY, khi mất focus
(blur), màu nền sẽ chuyển sang AQUA.
Hình 7.3: Kết quả của ví dụ 3 – Blur (hình trái) and focus (hình phải)
¾ onMouseOver
Sự kiện onMouseOver được tạo ra bất cứ khi nào con trỏ chuột di chuyển lên trên
một phần tử.
¾ onMouseOut
Sự kiện onMouseOut được tạo ra bất cứ khi nào con trỏ chuột di chuyển ra khỏi
phần tửđó.
Ví dụ 4:
<html>
<head>
<script language = “javascript”>
var num =0
function showLink(num)
{
if (num==1)
{
document.forms[0].elements[0].value= “You have selected
Aptech”;
}
if (num==2)
{
document.forms[0].elements[0].value = “You have selected
Asset”;
147
if (num==3)
{
document.forms[0].elements[0].value = “You have selected
Arena”;
}
}
</script>
</head>
<body>
<form>
<input type=text size=60 >
</form>
<a href=”#” onMouseOver=”showLink(1)”document.bgcolor= “
green”>Aptech</a><br>
<a href=”#” onMouseOver=”showLink(2)”>Asset</a><br>
<a href=”#” onMouseOver=”showLink(3)”>Arena</a><br>
</body>
</html>
Khi di chuyển chuột qua Aptech, kết quảđược hiển thị như sau.
Hình 7.4: Kết quả của ví dụ 4
¾ OnLoad
Sự kiện onLoad (áp dụng cho đối tượng body) được phát sinh khi đã tải xong tài
liệu. Nó cũng được phát sinh khi một ảnh đã tải xong.
Ví dụ 5:
148
<HEAD>
<TITLE>Hello </TITLE>
</HEAD>
<BODY onLoad=”alert(‘Hello’)”>
</BODY>
</HTML>
Kết quả:
Hình 7.5: Kết quả của ví dụ 5
¾ onSubmit
Sự kiện onSubmit được tạo ra bất cứ khi nào người dùng truyền dữ liệu từ form đi
(thường sử dụng nút Submit). Sự kiện xảy ra trước khi form thật sựđược gửi đi.
Thật ra, trình xử lý sự kiện tương ứng với sự kiện này có thể ngăn chặn form không
được gửi đi bằng cách trả về giá trị false. Cách này dùng đê kiểm tra sự hợp lệ của
dữ liệu nhập vào.
¾ onMouseDown
Sự kiện này được kích hoạt khi hành động nhấp chuột xảy ra. Nghĩa là, khi người
dùng nhấp chuột. Đây là trình xử lý sự kiện cho các đối tượng button, document,
và link.
¾ onMouseUp
Sự kiện này được kích hoạt khi hành động nhả chuột xảy ra. Nghĩa là, khi người
dùng thả chuột. Đây là trình xử lý sự kiện cho đối tượng button, document, và link.
Ví dụ 6:
<HTML>
<BODY BGCOLOR=”lavender”>
<FORM>
149
onmousedown=”(document.bgColor=’aqua’)”
onmouseup=”(document.bgColor=’limegreen’)”
</FORM>
</BODY>
</HTML>
Hình dưới đây hiển thị kết quả của ví dụ 6
Hình 7.6: Kết quả của ví dụ 6
¾ onResize
Sự kiện này được kích hoạt khi hành động thay đổi kích thước cửa sổ xảy ra. Nghĩa
là, khi người dùng hoặc một script làm thay đổi kích thước một cửa sổ hay frame.
Đây là trình xử lý sự kiện cho các đối tượng Window.
Ví dụ 7
<html>
<head>
<script language=”JavaScript”>
window.onresize= notify;
function notify()
{
alert(“Window resized!”);
}
</script>
</head>
<body>
Please resize the window.
</body>
</html>
150
Hình 7.7: Kết quả của ví dụ 7
7.5TRÌNH XỬ LÝ SỰ KIỆN
Khi một sự kiện được khởi tạo, chúng ta có thể tạo một đoạn mã JavaScript để đáp
ứng lại sự kiện. Đoạn mã này được gọi là trình xử lý sự kiện. Trình xử lý sự kiện có
thể là một câu lệnh đơn, một tập hợp các câu lệnh hoặc một hàm
<INPUT TYPE=”button”
NAME=”docode”
onClick=”DoOnClick();”>
Khi nhấp chuột vào một button, sự kiện onClick được khởi tạo. Sự kiện onClick gọi
hàm DoOnClick và thực thi những câu lệnh bên trong hàm.
Trình xử lý sự kiện cho các thẻ HTML
Để khởi tạo trình xử lý sự kiện cho thẻ HTML, chúng ta phải chỉ định thẻ và thuộc
tính trình xử lý sự kiện. Sau đó chúng ta gán mã JavaScript. Đoạn mã phải được
đặt trong cặp dấu nháy kép.
<TAG eventHandler=”JavaScript Code”>
Các đối số chuỗi phải được đặt trong cặp dấu nháy đơn.
<INPUT TYPE=”button” NAME=”Button1″ VALUE=”Open Sesame!”
onClick=”window.open(‘mydoc.html’, ‘newWin’)”>
Thay vì sử dụng nhiều câu lệnh JavaScript, hàm sẽ giúp cho việc thiết kế chương
trình tốt hơn. Chúng ta sẽ gọi hàm khi cần thiết. Hơn nữa các hàm đó có thể được
dùng bởi các phần tử khác.
Câu lệnh này gán hàm greeting() cho trình xử lý sự kiện onLoad của window.
Thuộc tính trình xử lý sự kiện được tham chiếu đến hàm greeting chứ không phải
lời gọi đến hàm greeting()
Ví dụ 8
<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
151
function greeting() {
alert(“Welcome to my world”);
}
</SCRIPT>
</HEAD>
<BODY onLoad=”greeting()”>
</BODY>
</HTML>
Kết quả:
Hình 7.8: Kết quả ví dụ 8
Trình xử lý sự kiện như là những thuộc tính
Chúng ta cũng có thể gán một hàm cho một trình xử lý sự kiện của một đối tượng. Cú
pháp như sau:
object.eventhandler = function;
Ví dụ,
window.onload = greeting;
Chúng ta xem lại ví dụ trên và sử dụng trình xử lý sự kiện như những thuộc tính:
Ví dụ 9
<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
function greeting() {
alert(“Welcome to my world”);
}
window.onload = greeting;
152
// –>
</SCRIPT>
</HEAD>
</HTML>
Kết quả sẽ tương tự như Hình 7.8. Điểm mạnh của kĩ thuật này là tính linh hoạt.
Chúng ta có thể thay đổI nhanh chóng các trình xử lý sự kiện khi được yêu cầu.
153
Tóm Tắt
T
T
ÀÀIILLIIỆỆUU
TT
HHAAMMKHKHẢẢOO
1. Giáo trình Lập trình Web, Trung tâm Aptech
