Các sự kiện HTML DOM trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Các sự kiện HTML DOM trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

HTML DOM cho phép JavaScript phản ứng với sự kiện HTML.

Phản ứng với sự kiện

Một JavaScript có thể được thực hiện khi một sự kiện xảy ra, như khi một 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ề sự kiện HTML:

  • Khi người dùng nhấp vào chuột
  • Khi một trang web đã được tải
  • Khi một hình ảnh đã được tải
  • Khi con chuột di chuyển qua một phần tử
  • Khi trường nhập được thay đổi
  • Khi một biểu mẫu HTML được gửi
  • Khi người dùng vuốt 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ó:

<!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:

<!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 thuộc tính sự kiện. Ví dụ gán 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 displayDate sẽ được thực thi khi nút được nhấp.

Gán sự kiện sử dụng DOM HTML

HTML DOM cho phép bạn gán sự kiện cho các phần tử HTML sử dụng JavaScript: Ví dụ gán 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”. Hàm sẽ được thực hiện khi nút được nhấp.

Sự kiện onload và onunload

Các sự kiện onload và onunload được kích hoạt khi người dùng nhập hoặc thoát 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, và 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ý các cookie.

<body onload=”checkCookies()”>

Sự kiện onchange

Sự kiện onchange thường được sử dụng kết hợp với 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 một trường đầu vào.

<input type=”text” id=”fname” onchange=”upperCase()”>

Sự kiện onmouseover và onmouseout

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 sử dụng chuột, hoặc ngoài một phần tử HTML.

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 kích hoạt, sự kiện onmousedown được kích hoạt, khi đó nút chuột được hoạt động, sự kiện onmouseup được kích hoạt, và cuối cùng là khi nhấn chuột xong, sự kiện onclick được kích hoạt.

Một số ví dụ khác

onmousedown và onmouseup: thay đổi hình ảnh khi người dùng giữ nút chuột.

onload: hiển thị hộp cảnh báo khi trang đã tải xong.

onfocus: thay đổi màu nền của trường đầu vào khi nó được lấy nét.

Sự kiện Mouse: thay đổi màu sắc của một phần tử khi con trỏ di chuyển qua nó.