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