Các sự kiện cung cấp các tương tác với cửa sổ trình duyệt và tài liệu hiện hành đang được load trong trang web, các hành động của user khi nhập dữ liệu vào form và khi click vào các button trong form.
Khi sử dụng bộ quản lý sự kiện bạn có thể viết các hàm để biểu diễn cho các hành động dựa vào các sự kiện được chọn
Bảng sự kiện trong Javascript
Bộ quản lý sự kiện (Event Handler)
Để quản lý các sự kiện trong javascript ta dùng các bộ quản lý sự kiện. Cú pháp của một bộ quản lý sự kiện:
Ví dụ:
Ví dụ:
Ví dụ:
Từ khóa
Ví dụ:
Các bộ quản lý sự kiện trong Javascript
Cách dùng bộ quản lý sự kiện onLoad & onUnload
Ví dụ:
Ví dụ:
Các sự kiện và Form
Các sự kiện được sử dụng để truy xuất Form như:
onClick, onSubmit, onFocus, onBlur và onChange.
Ví dụ:
Bạn cũng có thể dựa vào các phương pháp và các thuộc tính của đối tượng bằng phát biểu sau:
this.methodName() & this.propertyName.
Ví dụ:
Khi sử dụng bộ quản lý sự kiện bạn có thể viết các hàm để biểu diễn cho các hành động dựa vào các sự kiện được chọn
Bảng sự kiện trong Javascript
| Tên sự kiện | Mô tả |
|---|---|
| blur | Xảy ra khi điểm tập trung của ngõ vào được di chuyển ra khỏi một thành phần của Form (Khi user click ra ngoài một trường) |
| click | Khi user Click vào 1 link hoặc thành phần của Form. |
| change | Xảy ra khi giá trị của Form Field bị thay đổi bởi user. |
| focus | Xảy ra khi ngõ vào tập trung vào thành phần của Form. |
| load | Xảy ra khi một trang được Load vào trong bộ duyệt. |
| mouseover | Xảy ra khi User di chuyển mouse qua một Hyperlink. |
| select | Xảy ra khi User chọn 1 trường của thành phần Form. |
| submit | Xảy ra khi User xác nhận đã nhập xong dữ liệu. |
| unload | Xảy ra khi User rời khỏi trang Web. |
Bộ quản lý sự kiện (Event Handler)
Để quản lý các sự kiện trong javascript ta dùng các bộ quản lý sự kiện. Cú pháp của một bộ quản lý sự kiện:
<HTML_TAG OTHER_ATTRIBUTES eventHandler="JavaScript Program">Ví dụ:
<INPUT TYPE="text" onChange="checkField(this)">
Ví dụ:
<INPUT TYPE="text" onChange="
if (parseInt(this.value) <= 5) {
alert('Please enter a number greater than 5.');
}
">
Ví dụ:
<INPUT TYPE="text" onChange="
alert('Thanks for the entry.');
confirm('Do you want to continue?');
">
Từ khóa
this: quy cho đối tượng hiện hành.Trong Javascript Form là mộ đối tượng. Các thành phần của Form bao gồm text fields, checkboxes, radio buttons, buttons, và selection lists.Ví dụ:
<INPUT TYPE="text" onChange="checkField(this)">
Các bộ quản lý sự kiện trong Javascript
| Đối tượng | Bộ quản lý sự kiện tương ứng |
|---|---|
| Selection list | onBlur, onChange, onFocus |
| Text element | onBlur, onChange, onFocus, onSelect |
| Textarea element | onBlur, onChange, onFocus, onSelect |
| Button element | onClick |
| Checkbox | onClick |
| Radio button | onClick |
| Hypertext link | onClick, onMouseOver |
| Reset button | onClick |
| Submit button | onClick |
| Document | onLoad, onUnload |
| Window | onLoad, onUnload |
| Form | onSubmit |
Cách dùng bộ quản lý sự kiện onLoad & onUnload
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
</HEAD>
<BODY onLoad="alert('Welcome to my page!');"
onUnload="alert('Goodbye! Sorry to see you go!');">
<IMG SRC="title.gif">
</BODY>
</HTML>
Ví dụ:
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
var name = "";
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad="
name = prompt('Enter Your Name:','Name');
alert('Greetings ' + name + ', welcome to my page!');"
onUnload=" alert(Goodbye ' + name + ', sorry to see you go!');">
<IMG SRC="title.gif">
</BODY>
</HTML>
Ví dụ:
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
// DEFINE GLOBAL VARIABLE
var name = "";
function hello() {
name = prompt('Enter Your Name:','Name');
alert('Greetings ' + name + ', welcome to my page!');
}
function goodbye() {
alert(Goodbye ' + name + ', sorry to see you go!');
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad="hello();" onUnload="goodbye();">
<IMG SRC="title.gif">
</BODY>
</HTML>
Các sự kiện và Form
Các sự kiện được sử dụng để truy xuất Form như:
onClick, onSubmit, onFocus, onBlur và onChange.
Ví dụ:
<INPUT TYPE=text NAME="test" VALUE="test"
onBlur="alert('Thank You!');"
onChange="check(this);">
Khi giá trị thay đổi function check() sẽ được gọi. Ta dùng từ khóa this để chuyển đối tượng của trường hiện hành đến hàm check()Bạn cũng có thể dựa vào các phương pháp và các thuộc tính của đối tượng bằng phát biểu sau:
this.methodName() & this.propertyName.
Ví dụ:
<HTML>
<HEAD>
<TITLE>Example 5.3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function calculate(form) {
form.results.value = eval(form.entry.value);
}
function getExpression(form) {
form.entry.blur();
form.entry.value = prompt("Please enter a JavaScript mathematical expression","");
calculate(form);
}
//STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Enter a JavaScript mathematical expression:
<INPUT TYPE=text NAME="entry" VALUE="" onFocus="getExpression(this.form);">
<BR>
The result of this expression is:
<INPUT TYPE=text NAME="results" VALUE="" onFocus="this.blur();">
</FORM>
</BODY>
</HTML>
formObjectName.fieldname : Dùng để chỉ tên trường của hiện hành trong Form.formObjectName.fieldname.value : Dùng lấy giá trị của trường form hiện hành.
Tags
JavaScript