Sự kiện (Event) trong JavaScript
Sự kiện là điều xảy ra khi người dùng tương tác với trang web, chẳng hạn như khi người dùng nhấp vào một liên kết hoặc button, nhập văn bản vào textbox hoặc textarea, thực hiện lựa chọn trong check box, nhấn phím trên bàn phím, di chuyển con trỏ chuột , gửi biểu mẫu, v.v. Để tìm hiểu về sự kiện trong Javascript, mời bạn đọc tham khảo bài viết dưới đây của eLib.VN
Mục lục nội dung
1. Sự kiện là gì?
Sự kiện (Event) trong JavaScript là sự tương tác của JavaScript với HTML xảy ra khi người dùng hoặc trình duyệt thao tác với một trang web.
Các sự kiện là một phần của Document Object Model (DOM) Level 3 và mỗi phần tử HTML chứa một tập hợp các sự kiện mà có thể kích hoạt chương trình JavaScript.
Ví dụ về các sự kiện HTML:
- Khi người dùng click chuột
- Khi một trang web đã được tải
- Khi một hình ảnh đã được tải
- Khi di chuyển chuột qua một phần tử
- Khi một trường đầu vào được thay đổi
- Khi một biểu mẫu HTML được submit
- Khi người dùng nhấn một phím
2. Tương tác với sự kiện
Một JavaScript có thể được thực thi khi một sự kiện xảy ra, như khi người dùng nhấp vào một phần tử HTML.
Để thực thi mã khi người dùng nhấp vào một phần tử, hãy thêm mã JavaScript vào thuộc tính sự kiện HTML:
onclick=JavaScript
3. Sự kiện onclick
Đây là kiểu sự kiện được sử dụng thường xuyên nhất khi một người dùng click chuột trái. Bạn có thể đặt sự xác nhận, cảnh báo, … của bạn đối với kiểu sự kiện này.
<html>
<head>
<script type="text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<p>Click button sau để xem kết quả:</p>
<form>
<input type="button" onclick="sayHello()" value="Xin chao!" />
</form>
</body>
</html>
Kết quả:
4. Sự kiện onmouseover và onmouseout
Các sự kiện onmouseover và onmouseout có thể được sử dụng để kích hoạt một hàm khi người dùng di chuột qua hoặc ra khỏi một phần tử HTML:
<html>
<head>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color: #D94A38; width: 120px; height: 15px; padding: 5px;">
Mouse Over Me</div>
</body>
</html>
5. Sự kiện onmousedown, onmouseup và onclick
Sự kiện onmousedown, onmouseup và onclick là tất cả các phần của một cú click chuột. Đầu tiên khi một nút chuột được bấm, sự kiện onmousedown được kích hoạt, sau đó, khi nút chuột được giải phóng, sự kiện onmouseup được kích hoạt, cuối cùng, khi nhấp chuột hoàn tất, sự kiện onclick được kích hoạt.
<html>
<head>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor = "#D94A38";
obj.innerHTML = "Thank You";
}
</script>
</head>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color: #D94A38; width: 120px; height: 15px; padding: 5px;">
Click Me</div>
</body>
</html>
Kết quả:
6. Sự kiện HTML5 chuẩn
Các sự kiện HTML5 chuẩn được liệt kê dưới đây. Tại đây, script chỉ dẫn một hàm JavaScript để được thực thi đối với sự kiện đó.
| Thuộc tính | Giá trị | Miêu tả |
|---|---|---|
| Offline | script | Kích hoạt khi tài liệu ở ngoại tuyến |
| Onabort | script | Kích hoạt trên một sự kiện bỏ dở |
| onafterprint | script | Kích hoạt sau khi tài liệu được in |
| onbeforeonload | script | Kích hoạt trước khi tài liệu tải |
| onbeforeprint | script | Kích hoạt trước khi tài liệu được in |
| onblur | script | Kích hoạt khi cửa sổ mất trọng tâm |
| oncanplay | script | Kích hoạt khi media có thể bắt đầu chơi, nhưng phải dừng để đệm |
| oncanplaythrough | script | Kích hoạt khi media có thể chơi tới cuối, mà không dừng để đệm |
| onchange | script | Kích hoạt khi một phần tử thay đổi |
| onclick | script | Kích hoạt trên một cú click chuột |
| oncontextmenu | script | Kích hoạt khi menu ngữ cảnh bị kích hoạt |
| ondblclick | script | Kích hoạt khi nhấp đúp chuột |
| ondrag | script | Kích hoạt khi một phần tử bị kéo |
| ondragend | script | Kích hoạt tại phần cuối của hoạt động kéo |
| ondragenter | script | Kích hoạt khi một phần tử đã được kéo tới một mục tiêu thả hợp lệ |
| ondragleave | script | Kích hoạt khi một phần tử đang được kéo qua một mục tiêu thả hợp lệ |
| ondragover | script | Kích hoạt tại phần đầu của hoạt động kéo |
| ondragstart | script | Kích hoạt tại phần đầu của hoạt động kéo |
| ondrop | script | Kích hoạt khi phần tử được kéo đang được thả |
| ondurationchange | script | Kích hoạt khi độ dài của media được thay đổi |
| onemptied | script | Kích hoạt khi phần tử nguồn media đột nhiên trở nên trống |
| onended | script | Kích hoạt khi media tiến tới cuối cùng |
| onerror | script | Kích hoạt khi một lỗi xảy ra |
| onfocus | script | Kích hoạt khi cửa sổ nhận trọng tâm |
| onformchange | script | Kích hoạt khi một form thay đổi |
| onforminput | script | Kích hoạt khi một form nhận input từ người dùng |
| onhaschange | script | Kích hoạt khi tài liệu có thay đổi |
| oninput | script | Kích hoạt khi một phần tử nhận đầu vào từ người dùng |
| oninvalid | script | Kích hoạt khi một phần tử không hợp lệ |
| onkeydown | script | Kích hoạt khi một phím bị nhấn |
| onkeypress | script | Kích hoạt khi một phím bị nhấn và được thả ra |
| onkeyup | script | Kích hoạt khi một phím được thả ra |
| onload | script | Kích hoạt khi tài liệu tải |
| onloadeddata | script | Kích hoạt khi dữ liệu media được tải |
| onloadedmetadata | script | Kích hoạt khi thời gian và dữ liệu khác của một phần tử media được tải |
| onloadstart | script | Kích hoạt khi trình duyệt bắt đầu tải dữ liệu media |
| onmessage | script | Kích hoạt khi thông báo được kích hoạt |
| onmousedown | script | Kích hoạt khi một nút chuột được nhả ra |
| onmousemove | script | Kích hoạt khi con trỏ chuột di chuyển |
| onmouseout | script | Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử |
| onmouseover | script | Kích hoạt khi con trỏ chuột di chuyển qua một phần tử |
| onmouseup | script | Kích hoạt khi một nút chuột được nhả ra |
| onmousewheel | script | Kích hoạt khi bánh xe chuột được quay |
| onoffline | script | Kích hoạt khi tài liệu ở ngoại tuyến |
| onoine | script | Kích hoạt khi tài liệu ở trực tuyến |
| ononline | script | Kích hoạt khi tài liệu ở trực tuyến |
| onpagehide | script | Kích hoạt khi cửa sổ bị ẩn |
| onpageshow | script | Kích hoạt khi cửa sổ trở nên nhìn thấy |
| onpause | script | Kích hoạt khi dữ liệu media bị dừng |
| onplay | script | Kích hoạt khi dữ liệu media chuẩn bị bắt đầu chơi |
| onplaying | script | Kích hoạt khi dữ liệu media đang bắt đầu chơi |
| onpopstate | script | Kích hoạt khi lịch sử cửa sổ thay đổi |
| onprogress | script | Kích hoạt khi trình duyệt đang nhận dữ liệu media |
| onratechange | script | Kích hoạt khi tốc độ chơi của media đã thay đổi |
| onreadystatechange | script | Kích hoạt khi trạng thái sẵn sàng thay đổi |
| onredo | script | Kích hoạt khi tài liệu thực hiện một redo |
| onresize | script | Kích hoạt khi cửa sổ bị thay đổi kích cỡ |
| onscroll | script | Kích hoạt khi thanh cuốn của phần tử đang được cuốn |
| onseeked | script | Kích hoạt khi thuộc tính seeking của một phần tử media không còn true, và seeking đã kết thúc |
| onseeking | script | Kích hoạt khi thuộc tính seeking của một phần tử media là true, và seeking đã bắt đầu |
| onselect | script | Kích hoạt khi một phần tử được chọn |
| onstalled | script | Kích hoạt khi có một lỗi trong quá trình thu nhận dữ liệu media |
| onstorage | script | Kích hoạt khi một tài liệu tải |
| onsubmit | script | Kích hoạt khi một form được đệ trình |
| onsuspend | script | Kích hoạt khi trình duyệt đã đang thu nhận dữ liệu media, nhưng đã dừng lại trước khi toàn bộ media file được thu nhận |
| ontimeupdate | script | Kích hoạt khi media thay đổi vị trí chơi của nó |
| onundo | script | Kích hoạt khi một tài liệu thực hiện một undo |
| onunload | script | Kích hoạt khi người sử dụng rời khỏi tài liệu |
| onvolumechange | script | Kích hoạt khi media thay đổi âm lượng, kể cả khi media được thiết lập là mute |
| onwaiting | script | Kích hoạt khi media đã dừng chơi nhưng được mong chờ phục hồi. |
Trên đây là bài viết của eLib.VN về Sự kiện (Event) trong JavaScript. Đây là một trong những kiến thức cơ bản và quan trọng, bạn đọc cần lưu ý để nghiên cứu kỹ hơn. Chúc các bạn thành công!
Như vậy là chúng ta đã hoàn thành nội dung "Giới thiệu về lập trình JavaScript". Để củng cố và nắm vững nội dung đã học, mời bạn cùng thử sức với "Bộ Câu hỏi Trắc Nghiệm JavaScript có đáp án chi tiết"
Tham khảo thêm
- doc Cú pháp trong JavaScript
- doc Nhúng JavaScript vào HTML
- doc Biến trong JavaScript
- doc Biến toàn cầu JavaScript
- doc Kiểu dữ liệu trong JavaScript
- doc Toán tử trong JavaScript
- doc Hàm (function) trong JavaScript
