Javascript - Sự kiện(event)
Khái niệm sự kiện và xử lý sự kiện
JavaScript là ngôn ngữ định hướng sự kiện, nghĩa là sẽ phản ứng trước các sự kiện như: Click chuột . . .
Chương trình xử lý sự kiện (Event handler) là 1 đoạn mã hay 1 hàm được thực hiện để phản ứng trước 1 sự kiện được xác định là một thuộc tính của một thẻ HTML:
Cú pháp:
<tagName eventHandler = "JavaScript Code or Function">
Ví dụ:Trang EventHander.htm thẩm định giá trị đưa vào trong trường text Tuổi phai hợp lệ nếu sẽ xuất hiện thông báo yêu cầu nhập lại.
<HTML>
<HEAD><Title> An Event Handler Exemple </Title>
<Script Language= "JavaScript">
function CheckAge() {
if ( (document.frmDieutra.AGE.value<0)||(document.frmDieutra.AGE.value>120) ) {
alert("Tuổi nhập vào không hợp lệ! Mời bạn nhập lại");
document.frmDieutra.AGE.value=0;
}
}
</Script>
</Head><Body>
<Form NAME="frmDieutra">
Nhập vào tên của bạn:<BR>
Tên <Input Type=Text Name="TEN" ><BR>
Đệm <Input Type=Text Name="DEM" ><BR>
Họ <Input Type=Text Name="HO" ><BR>
Age <Input Type=Text Name="AGE" onChange="CheckAge()"><BR>
<Input Type="button" Value="Submit">
<Input Type="Reset" Value="Reset">
</Form>
</Body></HTML>
Một số sự kiện trong JavaScript:
Phương thức | Giải thích |
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 |
Các sự kiện có sẵn của một số đối tượng.
Đố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 |
Ví dụ: Trang LoadUnLoad.htm
<HTML>
<HEAD> <TITLE>Event Handler</TITLE>
</HEAD>
<BODY onLoad="alert('Welcome to my page!');" onUnload="alert('Goodbye! ');">
<IMG SRC="Logo.jpg">
</BODY>
</HTML>