Tổng Hợp Hàm Xử Lý Sự kiện Trong JavaScript | Events Functions

• Đặt trực tiếp trong thẻ HTML.

<button onclick="myFunction()">Click me</button>

• Đặt thông qua JavaScript sử dụng thuộc tính
  on của các đối tượng DOM.

document.getElementById("myButton").onclick = function() {
    // Code xử lý sự kiện
};

• Phương thức này cho phép thêm nhiều xử lý sự
  kiện cho một đối tượng.

document.getElementById("myButton").addEventListener("click", function() {
    // Code xử lý sự kiện
});

• Thông tin chi tiết về sự kiện được truyền vào hàm xử
  lý thông qua đối tượng sự kiện.

document.getElementById("myButton").addEventListener("click", function(event) {
    // event chứa thông tin về sự kiện
});

• Để loại bỏ một xử lý sự kiện được thêm trước đó.

function myFunction() {
    // Code xử lý sự kiện
    document.getElementById("myButton").removeEventListener("click", myFunction);
}

• Sự kiện có thể lan truyền theo hướng bubbling (lan truyền
  lên) hoặc capturing (lan truyền xuống).

document.getElementById("myDiv").addEventListener("click", function() {
    // Xử lý sự kiện trong quá trình lan truyền lên
}, false); // Tham số thứ ba là sử dụng bubbling (mặc định) hoặc capturing (true)

• Áp dụng một xử lý sự kiện cho nhiều phần tử con
  thông qua một phần tử cha.

document.getElementById("myDiv").addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        // Xử lý sự kiện khi button được click
    }
});

• Đối tượng sự kiện có nhiều thuộc tính hữu ích như
  event.target (phần tử gây ra sự kiện),
  event.type (loại sự kiện), và nhiều thuộc
  tính khác.

  document.getElementById("myInput").addEventListener("input", function(event) {
      console.log(event.target.value); // Lấy giá trị của input
  });
  

• Xử lý sự kiện liên quan đến bàn phím như
  keydown, keyup, keypress.

  document.addEventListener("keydown", function(event) {
      if (event.key === "Enter") {
          // Xử lý khi phím Enter được nhấn
      }
  });
  

• Xử lý sự kiện chuột như click,
  mouseover, mouseout, mousemove.

  document.getElementById("myElement").addEventListener("mouseover", function() {
      // Xử lý khi chuột di chuyển vào phần tử
  });
  

• Sự kiện liên quan đến form như submit,
  reset, change.

  document.getElementById("myForm").addEventListener("submit", function(event) {
      // Ngăn chặn việc gửi form
      event.preventDefault();
      // Xử lý form
  });
  

• Cho thiết bị cảm ứng, như touchstart,
  touchmove, touchend.

  document.addEventListener("touchstart", function(event) {
      // Xử lý khi bắt đầu chạm vào màn hình
  });
  

• Tạo và kích hoạt sự kiện tùy chỉnh để giao tiếp
  giữa các thành phần khác nhau.

  // Định nghĩa sự kiện tùy chỉnh
  var customEvent = new Event("customEvent");
  
  // Lắng nghe sự kiện tùy chỉnh
  document.addEventListener("customEvent", function() {
      // Xử lý sự kiện tùy chỉnh
  });
  
  // Kích hoạt sự kiện tùy chỉnh
  document.dispatchEvent(customEvent);
  

• Sử dụng để kiểm soát tần suất gọi hàm xử lý sự
  kiện, giảm hiệu suất.

  // Throttle - giữ lại một số lần gọi trong khoảng thời gian nhất định
  function throttle(func, delay) {
      let inThrottle;
      return function() {
          if (!inThrottle) {
              func();
              inThrottle = true;
              setTimeout(() => inThrottle = false, delay);
          }
      };
  }
  
  // Debounce - chờ một khoảng thời gian sau khi sự kiện kết thúc trước khi gọi hàm
  function debounce(func, delay) {
      let timer;
      return function() {
          clearTimeout(timer);
          timer = setTimeout(() => func(), delay);
      };
  }

• Sự kiện như animationstart, animationend,
  animationiteration để xử lý sự kiện khi animation
  bắt đầu, kết thúc, hoặc lặp lại.

element.addEventListener("animationend", function() {
    // Xử lý khi animation kết thúc
});

• Sự kiện như open, message,
  close cho xử lý sự kiện liên quan đến
  WebSockets.

var socket = new WebSocket("ws://example.com/socket");

socket.addEventListener("message", function(event) {
    // Xử lý khi nhận được tin nhắn từ WebSocket
});

• Các sự kiện như resize, scroll,
  load xảy ra trên cửa sổ trình duyệt.

window.addEventListener("resize", function() {
    // Xử lý khi kích thước cửa sổ thay đổi
});

• Sự kiện popstate khi lịch sử trình duyệt thay đổi.

window.addEventListener("popstate", function(event) {
    // Xử lý khi người dùng điều hướng qua các trạng thái lịch sử
});

• Sự kiện online và offline khi trạng
  thái kết nối Internet thay đổi.

window.addEventListener("online", function() {
    // Xử lý khi trạng thái trực tuyến
});

window.addEventListener("offline", function() {
    // Xử lý khi trạng thái offline
});

• Sự kiện như pointerdown, pointermove,
  pointerup cho xử lý sự kiện liên quan đến
  các thiết bị đầu nối như chuột, màn hình cảm ứng.

element.addEventListener("pointerdown", function(event) {
    // Xử lý khi có sự kiện nhấn chuột hoặc chạm màn hình
});

• Sự kiện như animationstart, animationend,
  animationiteration để xử lý sự kiện khi animation
  bắt đầu, kết thúc, hoặc lặp lại.

element.addEventListener("animationend", function() {
    // Xử lý khi animation kết thúc
});

• Sự kiện như open, message,
  close cho xử lý sự kiện liên quan đến
  WebSockets.

var socket = new WebSocket("ws://example.com/socket");

socket.addEventListener("message", function(event) {
    // Xử lý khi nhận được tin nhắn từ WebSocket
});

• Các sự kiện như resize, scroll,
  load xảy ra trên cửa sổ trình duyệt.

window.addEventListener("resize", function() {
    // Xử lý khi kích thước cửa sổ thay đổi
});

• Sự kiện popstate khi lịch sử trình duyệt thay đổi.

window.addEventListener("popstate", function(event) {
    // Xử lý khi người dùng điều hướng qua các trạng thái lịch sử
});

• Sự kiện online và offline khi trạng
  thái kết nối Internet thay đổi.

window.addEventListener("online", function() {
    // Xử lý khi trạng thái trực tuyến
});

window.addEventListener("offline", function() {
    // Xử lý khi trạng thái offline
});

• Sự kiện như pointerdown, pointermove,
  pointerup cho xử lý sự kiện liên quan đến
  các thiết bị đầu nối như chuột, màn hình cảm ứng.

element.addEventListener("pointerdown", function(event) {
    // Xử lý khi có sự kiện nhấn chuột hoặc chạm màn hình
});