Sự kiện JavaScript HTML DOM
HTML DOM cho phép JavaScript phản ứng với các sự kiện HTML:
Phản ứng với sự kiện
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
Ví dụ về các sự kiện HTML:
- Khi người dùng nhấp chuột
- Khi một trang web đã tải
- Khi một hình ảnh đã được tải
- Khi chuột di chuyển 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 gửi đi
- Khi người dùng gõ phím
Trong ví dụ này, nội dung của <h1>phần tử được thay đổi khi người dùng nhấp vào nó:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Trong ví dụ này, một hàm được gọi từ trình xử lý sự kiện:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Thuộc tính sự kiện HTML
Để gán sự kiện cho các phần tử HTML, bạn có thể sử dụng các thuộc tính sự kiện.
Thí dụ
Gán một sự kiện onclick cho một phần tử nút:
<button onclick="displayDate()">Try it</button>
Trong ví dụ trên, một hàm có tên displayDatesẽ được thực thi khi nút được nhấp.
Chỉ định sự kiện bằng HTML DOM
HTML DOM cho phép bạn chỉ định các sự kiện cho các phần tử HTML bằng JavaScript:
Thí dụ
Gán một sự kiện onclick cho một phần tử nút:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Trong ví dụ trên, một hàm có tên displayDateđược gán cho một phần tử HTML với id="myBtn".
Chức năng sẽ được thực hiện khi nút được nhấp.
Sự kiện onload và onunload
Sự kiện onloadvà onunloadđược kích hoạt khi người dùng truy cập hoặc rời khỏi trang.
Sự onloadkiện có thể được sử dụng để kiểm tra loại trình duyệt và phiên bản trình duyệt của khách truy cập, đồng thời tải phiên bản phù hợp của trang web dựa trên thông tin.
Sự kiện onloadvà onunloadcó thể được sử dụng để xử lý cookie.
Thí dụ
<body onload="checkCookies()">
Sự kiện trao đổi
Sự onchangekiện thường được sử dụng kết hợp với việc xác nhận các trường đầu vào.
Dưới đây là một ví dụ về cách sử dụng onchange. Hàm upperCase()
sẽ được gọi khi người dùng thay đổi nội dung của trường đầu vào.
Thí dụ
<input type="text" id="fname"
onchange="upperCase()">
Sự kiện onmouseover và onmouseout
Sự kiện onmouseovervà onmouseoutcó thể được sử dụng để kích hoạt một chức năng khi người dùng di chuyển qua hoặc rời khỏi phần tử HTML:
Sự kiện onmousedown, onmouseup và onclick
Các sự kiện onmousedown, onmouseupvà onclickđều là các phần của một cú nhấp chuột. Đầu tiên khi một nút chuột được nhấp, sự kiện onmousedown được kích hoạt, sau đó, khi thả nút chuột, 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.
Các ví dụ khác
Thay đổi hình ảnh khi người dùng giữ nút chuột.
Hiển thị hộp cảnh báo khi trang tải xong.
Thay đổi màu nền của trường nhập liệu khi nó được lấy nét.
Thay đổi màu của một phần tử khi con trỏ di chuyển qua phần tử đó.
Tham chiếu đối tượng sự kiện HTML DOM
Để có danh sách tất cả các sự kiện HTML DOM, hãy xem Tham chiếu Đối tượng Sự kiện HTML DOM hoàn chỉnh của chúng tôi .