07/09/2018, 15:21

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

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ã ...

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ó.

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
Bài liên quan

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

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ã ...

Hoàng Hải Đăng viết 15:21 ngày 07/09/2018

Sự kiện thời gian trong JavaScript

Mã JavaScript có thể được thực hiện trong khoảng thời gian nào đó. Đây được gọi là sự kiện thời gian. Sự kiện thời gian Đối tượng window cho phép thực thi mã theo các khoảng thời gian nhất định. Các khoảng thời gian này được gọi là sự kiện thời gian. Hai phương ...

Hoàng Hải Đăng viết 15:17 ngày 07/09/2018

Điều hướng HTML DOM trong JavaScript

Với HTML DOM, bạn có thể điều hướng cây node thông qua các mối quan hệ node. Các DOM Node Theo chuẩn HTML DOM của W3C, mọi thứ trong một tài liệu HTML là một node: Toàn bộ tài liệu là một node tài liệu Mỗi phần tử HTML là một node phần tử Văn bản bên ...

Tạ Quốc Bảo viết 15:16 ngày 07/09/2018

Các phần tử (node) HTML DOM trong JavaScript

Thêm và xóa các node (các phần tử HTML). Tạo các phần tử HTML mới (node) Để thêm một phần tử mới vào HTML DOM, bạn phải tạo phần tử (phần tử node) trước tiên, và sau đó nối nó với một phần tử hiện có. <div id="div1"> <p id="p1">This is a ...

Vũ Văn Thanh viết 15:14 ngày 07/09/2018

HTML DOM trong JavaScript – Thay đổi HTML

HTML DOM cho phép JavaScript thay đổi nội dung của các phần tử HTML. Thay đổi luồng đầu ra HTML JavaScript có thể tạo nội dung HTML động: Date: Mon Aug 28 2017 23:46:59 GMT+0700 (SE Asia Standard Time) Trong JavaScript, document.write() có thể được sử ...

Trịnh Tiến Mạnh viết 15:14 ngày 07/09/2018
0