Home » » Bài 7 - Sự kiện trong JavaScript

Bài 7 - Sự kiện trong JavaScript

Written By 1 on Thứ Năm, 28 tháng 8, 2008 | 19:13

Các sự kiện cung cấp các tương tác với 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 nhấp vào các nút 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

 

Các sự kiện trong JavaScript

Blur : xảy ra khi điểm tập trung của ngõ vào được di chuyển ra khỏi thành một thành phần của form ( khi user nhấp ra ngoài một trường )

Click : Khi user nhấp 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 kh một trang được load vào trong bộ trình duyệt

Mousover : Xảy ta khi user di chuyểm mouse qua một Hyperlink .

Select : Xảy ra khi user chọn 1 trường của 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 một trang web

 

Bộ quản lý sự kiện ( Event Handle )

Để 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="if (parseInt(this.value) <=5 ) {

alert('Please enter a number greater than 5');

}

">

 

Từ khoá this : Quy cho đối tượng hiện hành . Trong JavaScript , Form là một đố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 :

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ác dùng bộ quản lý sự kiện onLoad và onUnLoad :

<HTML>

<HEAD>

<TITLE> VI DU </TITLE>

</HEAD>

<BODY onLoad="alert('Chao Mung Ban Den Voi Thần Tốc !');"

onUnload="alert('Tam Biet ! Hen Gap Lai');">

</BODY>

</HTML>

 

Ví dụ  :

<HTML>

<HEAD>

<TITLE>VI DU </TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- HIDE FROM OTHER BROWSERS

var name ="";

// STOP HIDING FROM OTHER BROWSERS -->

</SCRIPT>

</HEAD>

<BODY onLoad=" name = prompt('Dien Ten Cua Ban Vao','ten');

alert('Chao Mung ' + name + ' den voi http://thantoc.blogspot.com');"

onUnload ="alert('Tam Biet ' + name + ' va hen gap lai');">

</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('Bạn đã thay đổi hehehe');" 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> VI DU </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 HIDNG 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 TYE=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 form hiện hành

0 nhận xét:

Đăng nhận xét