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