Các sự kiện phổ biến trong JavaScript: onchange, onblur, hover và hơn thế nữa
Giới thiệu
Sự kiện (Event) là một phần quan trọng trong JavaScript, cho phép bạn tương tác với người dùng thông qua các hành động như nhập liệu, di chuyển chuột, hoặc thay đổi giá trị. Trong bài viết này, chúng ta sẽ tìm hiểu về các sự kiện phổ biến như onchange, onblur, hover, và nhiều sự kiện khác, cùng với các ví dụ minh họa.
Các sự kiện phổ biến trong JavaScript
1. onchange
Sự kiện onchange được kích hoạt khi giá trị của một phần tử thay đổi, thường được sử dụng với các phần tử như <input>, <select>, và <textarea>.
Ví dụ:
<input type="text" id="name" placeholder="Nhập tên của bạn" />
<script>
const input = document.getElementById("name");
input.addEventListener("change", () => {
console.log("Giá trị đã thay đổi:", input.value);
});
</script>
2. onblur
Sự kiện onblur được kích hoạt khi một phần tử mất tiêu điểm (focus). Thường được sử dụng để kiểm tra dữ liệu khi người dùng rời khỏi một ô nhập liệu.
Ví dụ:
<input type="email" id="email" placeholder="Nhập email của bạn" />
<script>
const emailInput = document.getElementById("email");
emailInput.addEventListener("blur", () => {
if (!emailInput.value.includes("@")) {
console.log("Email không hợp lệ");
}
});
</script>
3. hover (Sử dụng onmouseenter và onmouseleave)
JavaScript không có sự kiện hover trực tiếp, nhưng bạn có thể sử dụng onmouseenter và onmouseleave để mô phỏng hành vi này.
Ví dụ:
<div id="hoverBox" style="width: 100px; height: 100px; background-color: lightblue;">
Di chuột vào đây
</div>
<script>
const box = document.getElementById("hoverBox");
box.addEventListener("mouseenter", () => {
box.style.backgroundColor = "blue";
});
box.addEventListener("mouseleave", () => {
box.style.backgroundColor = "lightblue";
});
</script>
4. onfocus
Sự kiện onfocus được kích hoạt khi một phần tử nhận được tiêu điểm (focus). Thường được sử dụng để làm nổi bật ô nhập liệu.
Ví dụ:
<input type="text" id="focusInput" placeholder="Nhấp vào đây" />
<script>
const input = document.getElementById("focusInput");
input.addEventListener("focus", () => {
input.style.border = "2px solid green";
});
</script>
5. oninput
Sự kiện oninput được kích hoạt mỗi khi giá trị của một phần tử đầu vào thay đổi, ngay cả khi người dùng đang nhập.
Ví dụ:
<input type="text" id="liveInput" placeholder="Nhập gì đó" />
<p id="output"></p>
<script>
const input = document.getElementById("liveInput");
const output = document.getElementById("output");
input.addEventListener("input", () => {
output.textContent = `Bạn vừa nhập: ${input.value}`;
});
</script>
6. onsubmit
Sự kiện onsubmit được kích hoạt khi một biểu mẫu (form) được gửi.
Ví dụ:
<form id="myForm">
<input type="text" placeholder="Nhập tên của bạn" required />
<button type="submit">Gửi</button>
</form>
<script>
const form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
event.preventDefault(); // Ngăn chặn hành vi gửi mặc định
console.log("Biểu mẫu đã được gửi");
});
</script>
7. onscroll
Sự kiện onscroll được kích hoạt khi người dùng cuộn trang hoặc một phần tử có thanh cuộn.
Ví dụ:
<div id="scrollBox" style="width: 200px; height: 100px; overflow-y: scroll; border: 1px solid black;">
<p>Cuộn xuống để xem thêm nội dung.</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Consectetur adipiscing elit...</p>
</div>
<script>
const scrollBox = document.getElementById("scrollBox");
scrollBox.addEventListener("scroll", () => {
console.log("Đang cuộn...");
});
</script>
8. onkeydown, onkeyup, và onkeypress
Các sự kiện này được kích hoạt khi người dùng nhấn hoặc thả phím.
Ví dụ:
<input type="text" id="keyInput" placeholder="Nhấn phím bất kỳ" />
<script>
const input = document.getElementById("keyInput");
input.addEventListener("keydown", (event) => {
console.log(`Bạn vừa nhấn phím: ${event.key}`);
});
</script>
9. ondrag và ondrop
Sự kiện này được sử dụng để xử lý hành vi kéo và thả.
Ví dụ:
<div id="dragItem" draggable="true" style="width: 50px; height: 50px; background-color: red;"></div>
<div id="dropZone" style="width: 200px; height: 200px; border: 2px dashed black; margin-top: 20px;"></div>
<script>
const dragItem = document.getElementById("dragItem");
const dropZone = document.getElementById("dropZone");
dragItem.addEventListener("dragstart", () => {
console.log("Bắt đầu kéo");
});
dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Cho phép thả
});
dropZone.addEventListener("drop", () => {
console.log("Đã thả vào vùng thả");
});
</script>
Yêu cầu đăng nhập
Vui lòng đăng nhập để truy cập nội dung này
Additional Resources
Course Guide
Comprehensive PDF guide with examples
GitHub Repository
Example code for all lessons
Discussion
Have a question about this lesson? Post it here and get answers from instructors and peers.