Bài 20: DOM Events – onclick, onchange, oninput, và cách bắt sự kiện

Bây giờ là Bài 12 – DOM Events trong JavaScript. Đây là phần giúp bạn bắt các sự kiện người dùng tương tác như click, nhập liệu, rê chuột… và phản hồi bằng JavaScript.

1. Sự kiện (event) là gì?

Sự kiện là hành động xảy ra trong trình duyệt như:

• Click chuột
• Nhập vào ô input
• Di chuyển chuột
• Cuộn trang
• Bấm phím

→ JavaScript cho phép bạn gắn hàm xử lý (callback) khi sự kiện xảy ra.

2. Gắn sự kiện trực tiếp trong HTML (không khuyến khích)

📋 Copy<button onclick="sayHello()">Bấm vào đây</button>

<script>
  function sayHello() {
    alert("Xin chào!")
  }
</script>

3. Gắn sự kiện bằng JavaScript (khuyên dùng)

📋 Copy<button id="btn">Click me</button>

<script>
  let button = document.getElementById("btn")

  button.addEventListener("click", function () {
    alert("Bạn vừa bấm nút")
  })
</script>

4. Một số sự kiện thường dùng

5. Ví dụ: input và change

📋 Copy<input id="yourName" placeholder="Nhập tên..." />

<script>
  let input = document.getElementById("yourName")

  input.addEventListener("input", function () {
    console.log("Bạn đang gõ: " + input.value)
  })

  input.addEventListener("change", function () {
    console.log("Bạn vừa nhập xong: " + input.value)
  })
</script>

6. Ngăn hành vi mặc định với preventDefault()

📋 Copy<form id="myForm">
  <button>Gửi</button>
</form>

<script>
  let form = document.getElementById("myForm")

  form.addEventListener("submit", function (e) {
    e.preventDefault()
    alert("Form đã bị chặn, không reload")
  })
</script>

7. Giao diện học (code + output)

Tóm tắt bài 12

Bạn đã học:

• Sự kiện là hành động của người dùng trên trang
• Có thể gắn sự kiện bằng addEventListener()
• Các sự kiện phổ biến: click, input, change, submit…
• Cách ngăn reload bằng preventDefault()

Bài tập

1. Tạo 1 nút bấm → bấm vào thì đổi màu nền trang
2. Tạo 1 ô input → nhập tên và hiển thị ra console.log
3. Tạo 1 form có nút Gửi → chặn hành vi reload trang