Sự kiện trong HTML DOM (DOM Events) trong JavaScript
JavaScript HTML DOM | by
Trong lập trình web, sự kiện (Event) đóng vai trò quan trọng trong việc tạo ra các trang web tương tác động. Mọi hành động của người dùng trên trang web như nhấn nút (click), nhập dữ liệu, di chuột, cuộn trang hoặc các thay đổi từ hệ thống như tải trang, thay đổi kích thước trình duyệt đều là các sự kiện.
HTML DOM Events trong JavaScript giúp chúng ta lắng nghe (listen) và xử lý (handle) các sự kiện này, từ đó tạo ra các phản hồi phù hợp nhằm nâng cao trải nghiệm người dùng. Bằng cách sử dụng các phương pháp như thuộc tính sự kiện, addEventListener(), chúng ta có thể dễ dàng kiểm soát và điều khiển hành vi của các phần tử trên trang web.
Bài viết này sẽ giúp bạn hiểu rõ về các loại sự kiện trong DOM, cách lắng nghe và xử lý sự kiện, cũng như ứng dụng chúng trong lập trình web để xây dựng giao diện linh hoạt và sinh động.
Giới thiệu về DOM Events trong JavaScript
.png)
Khái niệm về sự kiện (Event) trong JavaScript
Trong JavaScript, sự kiện (Event) là các hành động hoặc tương tác mà người dùng hoặc trình duyệt thực hiện trên trang web, chẳng hạn như nhấp chuột, nhập dữ liệu vào ô input, di chuyển chuột, gửi biểu mẫu, cuộn trang, tải tài liệu, v.v.
JavaScript cung cấp các cơ chế để lắng nghe và xử lý những sự kiện này, giúp trang web trở nên tương tác và linh hoạt hơn. Khi một sự kiện xảy ra, ta có thể thực hiện các hành động như:
-
Hiển thị hoặc ẩn nội dung.
-
Thay đổi màu sắc, bố cục của trang.
-
Xử lý dữ liệu nhập vào form.
-
Kiểm soát hành vi của trình duyệt.
Ví dụ về một sự kiện đơn giản:
<button onclick="alert('Bạn đã nhấn nút!')">Nhấn tôi</button>
Khi người dùng nhấn vào nút, sự kiện onclick được kích hoạt và hiển thị một thông báo.
Tầm quan trọng của sự kiện trong lập trình web
Sự kiện đóng vai trò quan trọng trong lập trình web vì chúng giúp:
-
Tạo trải nghiệm tương tác cho người dùng: Ví dụ, khi nhấn vào một nút, nội dung có thể thay đổi hoặc hiển thị thông báo.
-
Cải thiện khả năng điều hướng và xử lý dữ liệu: Giúp xác thực form, kiểm tra đầu vào trước khi gửi dữ liệu.
-
Tối ưu hóa hiệu suất trang web: JavaScript có thể xử lý sự kiện mà không cần tải lại trang, giúp trải nghiệm người dùng mượt mà hơn.
-
Quản lý hành vi của trình duyệt: Có thể chặn hành động mặc định của trình duyệt, như ngăn chặn gửi form khi chưa nhập đủ dữ liệu.
Các loại sự kiện phổ biến trong JavaScript
Dưới đây là các loại sự kiện phổ biến mà JavaScript hỗ trợ:
Sự kiện chuột (Mouse Events)
-
click– Xảy ra khi người dùng nhấn chuột vào một phần tử. -
dblclick– Xảy ra khi người dùng nhấp đúp chuột. -
mouseover– Xảy ra khi di chuột vào một phần tử. -
mouseout– Xảy ra khi di chuột ra khỏi một phần tử. -
mousedown/mouseup– Xảy ra khi nhấn và thả chuột.
Ví dụ:
<button id="btn">Nhấn vào tôi</button>
<script>
document.getElementById("btn").addEventListener("click", function() {
alert("Bạn vừa nhấn nút!");
});
</script>
Sự kiện bàn phím (Keyboard Events)
-
keydown– Xảy ra khi nhấn một phím. -
keyup– Xảy ra khi thả phím. -
keypress(cũ) – Xảy ra khi nhấn phím ký tự (không khuyến khích sử dụng vì đã bị loại bỏ trong các trình duyệt mới).
Ví dụ:
<input type="text" id="inputBox" placeholder="Nhập gì đó...">
<script>
document.getElementById("inputBox").addEventListener("keydown", function(event) {
console.log("Bạn vừa nhấn phím: " + event.key);
});
</script>
Sự kiện Form (Form Events)
-
submit– Xảy ra khi form được gửi. -
change– Xảy ra khi giá trị của input thay đổi. -
focus– Xảy ra khi input được chọn. -
blur– Xảy ra khi input mất focus.
Ví dụ:
<form id="myForm">
<input type="text" id="nameInput" placeholder="Nhập tên">
<button type="submit">Gửi</button>
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // Ngăn chặn gửi form
alert("Form đã được gửi!");
});
</script>
Sự kiện Tài liệu (Document Events)
-
DOMContentLoaded– Xảy ra khi tài liệu HTML được tải xong. -
scroll– Xảy ra khi người dùng cuộn trang. -
resize– Xảy ra khi kích thước cửa sổ trình duyệt thay đổi.
Ví dụ:
<script>
window.addEventListener("resize", function() {
console.log("Kích thước trình duyệt đã thay đổi!");
});
</script>
Cách lắng nghe và xử lý sự kiện trong JavaScript
.png)
Trong JavaScript, có nhiều cách để lắng nghe và xử lý sự kiện trên các phần tử HTML. Dưới đây là ba phương pháp phổ biến để thực hiện điều này.
Sử dụng thuộc tính sự kiện trực tiếp trong HTML
Cách đơn giản nhất để xử lý sự kiện là sử dụng các thuộc tính sự kiện trực tiếp trên thẻ HTML, như onclick, onmouseover, onchange, v.v.
Ví dụ:
<button onclick="alert('Bạn đã nhấn nút!')">Nhấn vào tôi</button>
Khi người dùng nhấn vào nút, sự kiện onclick sẽ được kích hoạt và hiển thị hộp thoại cảnh báo.
Ưu điểm:
Dễ hiểu và nhanh chóng triển khai.
Không cần viết JavaScript riêng biệt.
Nhược điểm:
Khó bảo trì khi có nhiều phần tử và sự kiện trong mã HTML.
Không thể gán nhiều sự kiện cho cùng một phần tử.
Vi phạm nguyên tắc tách biệt giữa HTML và JavaScript (không tuân theo chuẩn lập trình tốt).
Sử dụng thuộc tính sự kiện trong JavaScript
Một cách khác là gán sự kiện trực tiếp cho phần tử trong JavaScript bằng cách sử dụng thuộc tính sự kiện (element.event = function).
Ví dụ:
<button id="btn">Nhấn vào tôi</button>
<script>
document.getElementById("btn").onclick = function() {
alert("Bạn đã nhấn nút!");
};
</script>
Ở đây, sự kiện onclick được gán cho phần tử có id="btn" bằng JavaScript thay vì trong HTML.
Ưu điểm:
Giúp tách biệt HTML và JavaScript, dễ bảo trì hơn.
Không cần viết sự kiện trong thẻ HTML.
Nhược điểm:
Nếu gán nhiều sự kiện cùng loại vào một phần tử, sự kiện trước đó sẽ bị ghi đè.
Không thể thêm nhiều trình xử lý cho cùng một sự kiện.
Ví dụ về vấn đề ghi đè sự kiện:
<button id="btn">Nhấn vào tôi</button>
<script>
let btn = document.getElementById("btn");
btn.onclick = function() {
alert("Sự kiện 1");
};
btn.onclick = function() {
alert("Sự kiện 2"); // Sự kiện 1 bị ghi đè, chỉ sự kiện 2 hoạt động.
};
</script>
