13. DOM Event Trong Lập Trình JavaScript

Trong lập trình JavaScript, DOM (Document Object Model) Events (sự kiện) là các hành động hoặc tương tác mà người dùng thực hiện trên trang web, chẳng hạn như nhấn nút, di chuột, gõ phím, hay thay đổi nội dung các phần tử. JavaScript cho phép bạn lắng nghe và xử lý các sự kiện này để thực hiện các hành động phản hồi hoặc tương tác với người dùng.

Dưới đây là một số cách để làm việc với DOM Events trong JavaScript:

Lắng nghe và xử lý sự kiện: Bạn có thể lắng nghe và xử lý các sự kiện bằng cách sử dụng phương thức addEventListener() trên DOM Elements. Phương thức này cho phép bạn gắn một trình xử lý sự kiện vào một phần tử, và xử lý sự kiện khi nó xảy ra.

html

<!-- Ví dụ HTML -->
<button id="myButton">Nhấn vào đây</button>

javascript

const myButton = document.getElementById("myButton");

// Lắng nghe sự kiện click
myButton.addEventListener("click", function() {
  alert("Bạn đã nhấn vào nút!");
});

Các sự kiện phổ biến: Có rất nhiều sự kiện phổ biến mà bạn có thể lắng nghe, bao gồm: click, mouseenter, mouseleave, change, input, keydown, keyup, submit, và nhiều sự kiện khác. Bạn có thể lắng nghe các sự kiện này trên các phần tử cụ thể và thực hiện các hành động tương ứng.
Ngăn chặn hành vi mặc định: Khi bạn xử lý một sự kiện, bạn có thể muốn ngăn chặn hành vi mặc định của trình duyệt (nếu có). Ví dụ: ngăn chặn việc gửi một biểu mẫu khi người dùng nhấn Enter, hoặc ngăn chặn việc điều hướng khi người dùng nhấp vào một liên kết.

html

<!-- Ví dụ HTML -->
<form id="myForm">
  <input type="text" id="myInput">
  <button type="submit">Gửi</button>
</form>

javascript

const myForm = document.getElementById("myForm");

myForm.addEventListener("submit", function(event) {
  event.preventDefault(); // Ngăn chặn việc gửi biểu mẫu mặc định
  const inputValue = document.getElementById("myInput").value;
  alert("Giá trị đã nhập: " + inputValue);
});

Loại bỏ trình xử lý sự kiện: Nếu bạn muốn loại bỏ một trình xử lý sự kiện đã được gắn kết với một phần tử, bạn có thể sử dụng phương thức removeEventListener().

javascript

const myButton = document.getElementById("myButton");

function clickHandler() {
  alert("Bạn đã nhấn vào nút!");
}

// Gắn trình xử lý sự kiện
myButton.addEventListener("click", clickHandler);

// Loại bỏ trình xử lý sự kiện
myButton.removeEventListener("click", clickHandler);

Các DOM Events là một phần quan trọng trong việc xây dựng các trang web tương tác. Chúng cho phép bạn tương tác với người dùng và tạo các trải nghiệm đáng chú ý và hữu ích.

Leave a Comment Cancel Reply