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>

So sánh các sự kiện phổ biến

Sự kiện	Kích hoạt khi nào?	Phần tử áp dụng
`onchange`	Giá trị của phần tử thay đổi	`<input>`, `<select>`
`onblur`	Phần tử mất tiêu điểm	`<input>`, `<textarea>`
`hover`	Chuột di chuyển vào/rời khỏi phần tử	Bất kỳ
`onfocus`	Phần tử nhận tiêu điểm	`<input>`, `<textarea>`
`oninput`	Giá trị thay đổi khi người dùng nhập	`<input>`, `<textarea>`
`onsubmit`	Biểu mẫu được gửi	`<form>`
`onscroll`	Người dùng cuộn trang	Bất kỳ
`onkeydown`	Người dùng nhấn phím	`<input>`, `<textarea>`
`ondrag`/`ondrop`	Người dùng kéo và thả	Bất kỳ

Kết luận

Các sự kiện phổ biến trong JavaScript như onchange, onblur, và hover giúp bạn tạo ra các ứng dụng web tương tác và thân thiện với người dùng. Hiểu cách sử dụng chúng sẽ giúp bạn xây dựng các tính năng mạnh mẽ và linh hoạt hơn.

Hãy thực hành các ví dụ trên để nắm vững kiến thức này. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận bên dưới!

Các sự kiện phổ biến trong JavaScript: onchange, onblur, hover và hơn thế nữa

Giới thiệu