[BÀI 15] SỰ KIỆN (EVENT)TRONG JAVASCRIPT
Sự kiện trong JavaScript Các chương trình JavaScript thường là hướng sự kiện. Các hành động xảy ra trên trang web tác động đến các phần tử HTML. Một sự kiện có thể do người dùng tạo ra hoặc do hệ thống tạo ra. Hầu hết các trình duyệt đều hỗ trợ một đối tượng Event. Mỗi sự kiện có một đối ...
Sự kiện trong JavaScript
Các chương trình JavaScript thường là hướng sự kiện. Các hành động xảy ra trên trang web tác động đến các phần tử HTML. Một sự kiện có thể do người dùng tạo ra hoặc do hệ thống tạo ra.
Hầu hết các trình duyệt đều hỗ trợ một đối tượng Event. Mỗi sự kiện có một đối tượng Event tương ứng. Đối tượng Event cung cấp thông tin, loại sự kiện và vị trí của con trỏ tại thời điểm xảy ra .
Ví dụ :
- Khi click chuột vào buttton.
- Khi load lại một trang web.
- Nhập thông tin vào trường Input.
- Thao tác với form HTML.
- Thao tác với con trỏ chuột tới phần tử hay vị trị nào đó.
Các sự kiện trong JavaScript
Các sự kiện thông thường mà JavaScript hỗ trợ.
– onClick : Được tạo ra bất cứ khi nào người dùng nhấp chuột vào button hoặc các phần tử form hoặc lên các liên kết.
|
1 2 3 4 |
function myFunction(){ alert("Xin chào các bạn"); } <input type = "button" value = "Click Here" onClick = "myFunction()"> |
– onLoad : Đượ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.
|
1 2 3 4 5 6 7 8 |
<body> <script type = "text/javascript"> function LoadImage(){ alert("Load Thành Công!!!"); } </script> <img src="devrpo.gif" onLoad="LoadImage()" with ="200px" height="200px"> </body> |
– onUnload : Xảy ra khi người dùng điều hướng khỏi trang (bằng cách nhấp vào liên kết, gửi biểu mẫu, đóng cửa sổ trình duyệt, vv).
Sự kiện form
Chúng ta cùng đi tìm hiểu : onChange, onFocus, onSubmit, onSelect, onBlur, onReset.
Các sự kiện onFocus, onBlur và onChange thường được sử dụng để kiểm tra dữ liệu nhập của các điều khiển trên form.
– onChange : Xảy ra khi giá trị của thành phần được chọn thay đổi.
|
1 2 3 4 5 6 7 8 9 10 |
<script> function change(){ alert("Đã thay đổi"); } </script> <selec onChange="change()"> <option value="1">Select</option> <option value="2">One</option> <option value ="3">Tow</option> </select> |
– onFocus : Được kích hoạt khi người sử dụng đặt focus vào một cửa sổ, khung hay phần tử form.
Ví dụ: Khi nhập họ tên của bạn vào ô text thì nó sẽ chuyển thành màu đỏ (red).
|
1 2 3 4 5 6 7 8 |
<body> <script> function myFunction(x) { document.getElementById(x).style.background = "red"; } </script> Tên: <input type="text" id="name" onfocus="myFunction(this.id)"> </body> |
– onBlur : Ngược với onFocus. 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ụ: Ta thay đổi màu nền bằng cách focus đến ô text nó sẽ chuyển thành màu vàng, di chuyển ra khỏi ô text sẽ chuyển thành đỏ .
|
1 2 3 4 |
<form> Click: <input type="text" id="Input" onfocus="document.bgColor='yellow'" onblur="document.bgColor='red'"> </form> |
– onSubmit : Được sử dụng để kiểm tra tất cả các điều khiển trong form trước khi gửi đi.
|
1 2 3 4 5 6 7 8 9 |
<form action="submit" method="post" onsubmit="myFunction()"> Tên: <input type="text" name="name"> <input type="submit" value="Submit"> </form> <script> function myFunction() { alert("Thông tin đã được gửi"); } </script> |
– 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.
– onReset : Khi form được reset.
Sự kiện bàn phím
| onkeydown | Thực hiện khi phím được nhấn |
| onkeypress | Thực hiện khi phím được nhấn và thả |
| onkeyup | Thực hiện khi phím được thả |
Sự kiện chuột
| onclick | Thực hiện khi click chuột |
| ondblclick | Thực hiện khi double click |
| onmousedown | Thực hiện khi nhấn chuột |
| onmousemove | Khi di chuyển chuột |
| onmouseout | Khi di chuyển chuột ra khỏi đối tượng |
| onmouseover | Khi di chuyển chuột lên đối tượng |
| onmouseup | Khi chuột đuợc thả (Sau khi nhấn) |
- Tìm hiểu thêm các sự kiện tại đây: Events.
- Các khóa học của DevPro tại đây !!!
