hμm đ−ợc thực hiện để phản ứng tr−ớc một sự kiện gọi lμ ch−ơng trình xử lý sự kiện. Ch−ơng trình xử lý sự kiện đ−ợc xác định lμ một thuộc tính của một thẻ HTML:
<tagName eventHandler = "JavaScript Code or Function">
Ví dụ sau gọi hμm CheckAge() mỗi khi giá trị của tr−ờng văn bản thay đổi:
<INPUT TYPE=TEXT NAME="AGE" onChange="CheckAge()">
Đoạn mã của ch−ơng trình xử lý sự kiện không lμ một hμm; nó lμ các lệnh của JavaScript cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thμnh các module nên viết d−ới dạng các hμm.
Một số ch−ơng trình xử lý sự kiện trong JavaScript:
onBlur Xảy ra khi input focus bị xoá từ thμnh phần form
onClick Xảy ra khi ng−ời dùng kích vμo các thμnh phần hay liên kết của form.
onChange Xảy ra khi giá trị của thμnh phần đ−ợc chọn thay đổi
onFocus Xảy ra khi thμnh phần của form đ−ợc focus(lμm nổi lên).
onLoad Xảy ra trang Web đ−ợc tải.
onMouseOver Xảy ra khi di chuyển chuột qua kết nối hay anchor.
onSelect Xảy ra khi ng−ời sử dụng lựa chọn một tr−ờng nhập dữ liệu trên form.
onSubmit Xảy ra khi ng−ời dùng đ−a ra một form.
onUnLoad Xảy ra khi ng−ời dùng đóng một trang
Sau đây lμ bảng các ch−ơng trình xử lý sự kiện có sẵn của một số đối t−ợng. Các đối t−ợng nμy sẽ đ−ợc trình bμy kỹ hơn trong phần sau.
Đối t−ợng Ch−ơng trình xử lý sự kiện có sẵn
Selection list onBlur, onChange, onFocus
Text onBlur, onChange, onFocus, onSelect
Textarea onBlur, onChange, onFocus, onSelect
Button onClick Checkbox onClick
Radio button onClick
Hypertext link onClick, onMouseOver, onMouseOut
Clickable Imagemap area onMouseOver, onMouseOut
Reset button onClick
Submit button onClick
Document onLoad, onUnload, onError
Window onLoad, onUnload, onBlur, onFocus
Framesets onBlur, onFocus
Form onSubmit, onReset
Image onLoad, onError, onAbort (adsbygoogle = window.adsbygoogle || []).push({});
Ví dụ sau lμ một đoạn mã script đơn giản của ch−ơng trình xử lý sự kiện thẩm định giá trị đ−a vμo trong tr−ờng text. Tuổi của ng−ời sử dụng đ−ợc nhập vμo trong tr−ờng nμy vμ ch−ơng trình xử lý sự kiện sẽ thẩm định tính hợp lệ của dữ liệu đ−a vμo. Nếu không hợp lệ sẽ xuất hiện một thông báo yêu cầu nhập lại. Ch−ơng trình xử lý sự kiện đ−ợc gọi mỗi khi tr−ờng AGE bị thay đổi vμ focus chuyển sang tr−ờng khác. Hình 5.10 minh hoạ kết quả của ví dụ nμy
<HEAD>
<TITLE> An Event Handler Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript">
function CheckAge(form) {
if ( (form.AGE.value<0)||(form.AGE.value>120) ) {
alert("Tuổi nhập vμo không hợp lệ! Mời bạn nhập lại"); form.AGE.value=0; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="PHIEU_DIEU_TRA"> Nhập vμo tên của bạn:<BR>
Tên <INPUT TYPE=TEXT NAME="TEN" MAXLENGTH=10 SIZE=10><BR> Đệm <INPUT TYPE=TEXT NAME="DEM" MAXLENGTH=15 SIZE=10><BR> Họ <INPUT TYPE=TEXT NAME="HO" MAXLENGTH=10 SIZE=10><BR>
Age <INPUT TYPE=TEXT NAME="AGE" MAXLENGTH=3 SIZE=2 onChange="CheckAge(PHIEU_DIEU_TRA)"><BR>
<P>
Bạn thích mùa nμo nhất:<BR>
Mùa xuân<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua xuan"> Mùa hạ<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua ha"> Mùa thu<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua thu"> Mùa đông<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua dong"> <P>
Hãy chọn những hoạt động ngoμi trời mμ bạn yêu thích:<BR>
Tr−ợt tuyết<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Truot tuyet">
Thể thao d−ới n−ớc<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Duoi nuoc">
Đạp xe<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Dap xe"> <P> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM> </BODY> </HTML>
Hình 5.10: Minh hoạ cho ví dụ Event Handler
Bμi tập
3.1.12.Câu hỏi