JavaScript HTML DOM sự kiện

HTML DOM cho phép JavaScript phản hồi sự kiện HTML:

Sự kiện di chuyển lên!
Nhấp vào tôi

Phản hồi sự kiện

JavaScript có thể thực hiện khi sự kiện xảy ra, ví dụ như khi người dùng nhấp vào một phần tử HTML.

Để thực hiện mã JavaScript khi người dùng nhấp vào 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 chuột vào chuột
  • Khi trang web được tải
  • Khi hình ảnh được tải
  • Khi con trỏ chuột di chuyển đến phần tử
  • Khi trường nhập bị thay đổi
  • Khi biểu mẫu HTML được gửi
  • Khi người dùng nhấn phím

Trong ví dụ này, khi người dùng nhấn <h1> thì sẽ thay đổi nội dung của nó:

ví dụ

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Nhấn vào văn bản này!</h1>
</body>
</html>

Thử ngay

Trong ví dụ này, gọi hàm từ trình xử lý sự kiện:

ví dụ

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Nhấn vào văn bản này!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Thử ngay

Thuộc tính sự kiện HTML

Nếu bạn muốn gán sự kiện cho phần tử HTML, bạn có thể sử dụng thuộc tính sự kiện.

ví dụ

cho phần tử button onclick sự kiện:

<button onclick="displayDate()">Thử nghiệm</button>

Thử ngay

trong ví dụ trên, hàm có tên displayDate sẽ được thực hiện khi nút được nhấn.

sử dụng HTML DOM để gán sự kiện

HTML DOM cho phép bạn sử dụng JavaScript để gán sự kiện cho phần tử HTML:

ví dụ

để chỉ định cho phần tử button onclick sự kiện:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Thử ngay

trong ví dụ trên, hàm có tên displayDate được gán cho phần tử HTML có id="myBtn".

khi nhấn nút sẽ thực hiện hàm.

sự kiện onload và onunload

khi người dùng vào và rời khỏi trang, sẽ kích hoạt onload và sự kiện onunload sự kiện.

onload sự kiệ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 người truy cập, sau đó tải phiên bản trang web phù hợp dựa trên thông tin này.

onload và sự kiện onunload sự kiện có thể được sử dụng để xử lý cookie.

ví dụ

<body onload="checkCookies()">

Thử ngay

sự kiện onchange

sự kiện onchange sự kiện thường được sử dụng cùng với việc xác thực trường nhập.

dưới đây là cách sử dụng sự kiện onchange khi người dùng thay đổi nội dung trường nhập, hàm upperCase() sẽ được gọi.

ví dụ

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

Thử ngay

sự kiện onmouseover và onmouseout

onmouseover và onmouseout Sự kiện có thể được sử dụng để kích hoạt một hàm nào đó khi người dùng di chuyển con trỏ đến hoặc ra khỏi yếu tố HTML:

Sự kiện di chuyển lên!

Thử ngay

sự kiện onmousedown, onmouseup và onclick

onmousedown, onmouseup và onclick Các sự kiện tạo thành sự kiện nhấp chuột chuột hoàn chỉnh.

Trước tiên khi nút chuột được nhấn,onmousedown Sự kiện được kích hoạt; sau đó khi nút chuột được thả ra,onmouseup Sự kiện được kích hoạt; cuối cùng, sau khi nhấp chuột xong,onclick Sự kiện được kích hoạt.

Nhấp vào tôi

Thử ngay

Thêm nhiều ví dụ

onmousedown và onmouseup
Thay đổi hình ảnh khi người dùng nhấn nút chuột.
onload
Hiển thị hộp cảnh báo khi trang đã hoàn thành việc tải.
onfocus
Thay đổi màu nền của trường nhập khi nó nhận được sự chú ý.
Sự kiện chuột
Thay đổi màu sắc của yếu tố khi con trỏ di chuyển đến yếu tố.

Tài liệu tham khảo đối tượng sự kiện HTML DOM

Nếu bạn cần danh sách đầy đủ các sự kiện HTML DOM, hãy truy cập trang Tài liệu tham khảo đối tượng sự kiện HTML DOM.