JavaScript Events - Các sự kiện trong JavaScript
Sự kiện HTML là "những thứ" xảy ra với các thành phần HTML.
Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng(react)" trên các sự kiện đó.
Các sự kiện HTML(HTML Events)
Một sự kiện HTML có thể là một cái gì đó mà trình duyệt làm, hoặc cái mà người dùng làm.
Đây là một vài ví dụ của các sự kiện HTML:
- Một trang web HTML đã tải xong
- Một ô input HTML đã được thay đổi
- Một nút HTML đã được bấm
Bình thường, khi các sự kiện xảy ra, bạn sẽ có thể muốn làm cái gì đó.
JavaScript để bạn thực thi code khi các sự kiện được phát hiện.
HTML cho phép các thuộc tính xử lý sự kiện, với JavaScript code, để được thêm vào các thành phần HTML.
Với dấu nháy đơn:
<element event='some JavaScript'>Với dấu nháy đôi:
<element event="some JavaScript">
Trong ví dụ tiếp theo, một thuộc tính onclick (với vode), được thêm vào một thành phần <button> :
ví dụ
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button><!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
Trong ví dụ trên, JavaScript Code thay đổi nội dung của thành phần có id="demo".
Trong ví dụ sau, code thay đổi nội dung thành phần của chính nó(sử dụng this.innerHTML):
ví dụ
<button onclick="this.innerHTML = Date()">The time is?</button><!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
Tip: JavaScript code thường dài vài dòng. Nó phổ biến để thấy các thuộc tính sự kiện gọi đến các hàm:
ví dụ
<button onclick="displayDate()">The time is?</button><!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html> Các sự kiện HTML phổ biến
Dưới đây là một danh sách của các sự kiện HTML phổ biến:
| Sự kiện | Mô tả |
|---|---|
| onchange | Một thành phần HTML đã bị thay đổi |
| onclick | Người dùng bấm vào một thành phần HTML |
| onmouseover | Người dùng di chuyển chuột qua một thành phần HTML |
| onmouseout | Người dùng di chuyển chuột ra khỏi một thành phần HTML |
| onkeydown | Người dùng bấm một nút trên bàn phím |
| onload | Trình duyệt hoàn thành việc tải trang |
JavaScript có thể làm gì
Các trình xử lý sự kiện có thể sử dụng để xử lý, và xác thực, người dùng nhập vào, các hành động của người dùng, và các hành động của trình duyệt:
- Những thứ nên được hoàn thành mỗi khi một trang tải.
- Những thứ nên được hoàn thành mỗi khi trang đóng.
- Hành động nên được thực hiện khi người dùng bấm vào một nút.
- Nội dung nên được xác thực khi người dùng nhập vào dữ liệu.
- Và nhiều hơn nữa...
Nhiều các phương thức khác nhau có thể được dùng để cho JavaScript làm việc với các sự kiện:
- Các thuộc tính sự kiện HTML có thể thực thi JavaScript code trực tiếp.
- Các thuộc tính sự kiện HTML có thể gọi các hàm JavaScript.
- Bạn có thể gán các hàm xử lý sự kiện của bạn vào các thành phần HTML.
- Bạn có thể ngăn chặn các sự kiện khỏi việc bị gửi hoặc bị xử lý.
- Và nhiều hơn nữa...
Tip: Bạn sẽ được học nhiều hơn nữa về các sự kiện và trình sử lý sự kiện trong chương HTML DOM.
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
