Làm việc với Sự kiện Javascript

Javascript đóng vai trò là xương sống của web trong việc làm cho các trang web tương tác thông qua các sự kiện.

Sự kiện javascript là một hành động xảy ra sau khi bạn tương tác với các phần tử trên trang web như nhấp vào nút hoặc nhập vào biểu mẫu.

Javascript chịu trách nhiệm ba phần vì nó liên quan đến các sự kiện. Đầu tiên là nhận dạng các sự kiện, thao tác với DOM (mô hình đối tượng tài liệu) và gửi tin nhắn đến máy chủ.

Lắng nghe sự kiện

Công việc thêm sự kiện vào các trang có thể gọi đây là sự kiện và bắt đầu bằng việc thêm trình xử lý sự kiện vào một phần tử.

Trình nghe sự kiện nhận ra bất cứ khi nào người dùng tương tác với phần tử đính kèm.

Nó bao gồm một loại sự kiện và một hàm gọi lại được gọi sau khi sự kiện được kích hoạt.

<!- Adding an event listener ->
<button>Shiny Button</button>

// First, we grab our button element.
const shinyButton = document.querySelector("button");

// Next, we attach our event listener with a click event.
shinyButton.addEventListener("click", () => {
   console.log("Clicked!");
});

Xử lý sự kiện

Trình xử lý sự kiện được xác định bởi hàm trong trình xử lý sự kiện, xử lý những việc cần làm với một sự kiện sau khi trình xử lý sự kiện được kích hoạt.

// Here are using a event to alert any key event
window.addEventListener("keydown", event => {
      // We are now inside the event handler
      alert(`You pressed key: ${event.key}`);
});

Đối tượng sự kiện

Sự kiện được đại diện bởi một đối tượng javascript có chứa các thuộc tính hữu ích như mục tiêu sự kiện và loại sự kiện. Đối tượng sự kiện được chuyển qua trình xử lý sự kiện đến trình xử lý sự kiện.

Sự kiện đang diễn ra

<!- Creating an name input form ->
<form id="form">
  <label>Name: <input type="text"></label>
  <br><br>
  <button type="submit">Submit</button>
</form>

<!- We will display a name here ->
<p id="name"></p>

// Adding the event handler
function onSubmit(event) {
  event.preventDefault();
  name.textContent = `Hi ${event.target.value}!`;
}

// Adding the event listener
const form = document.getElementById('form');
const name = document.getElementById('name');
form.addEventListener('submit', onSubmit);

Tham khảo bài viết tại Dev.to

Tham khảo khóa học Online về Javascript - tại đây

Khóa học Web Frontend + React - tại đây