Mấy cái event listener hay ho trong JavaScript mà ít ai biết

// Lấy hash ban đầu từ URL
const id = window.location.hash.slice(1);

// Lắng nghe khi hash thay đổi
window.addEventListener("hashchange", () => {
  const newId = window.location.hash.slice(1);
  console.log(`Hash đã thay đổi từ ${id} thành ${newId}`);
  // Thực hiện các hành động dựa trên hash mới
});

function renderPage() {
  const page = window.location.hash.slice(1) || "home";

  // Ẩn tất cả các section
  document.querySelectorAll("section").forEach((section) => {
    section.style.display = "none";
  });

  // Hiển thị section tương ứng với hash
  const currentSection = document.getElementById(page);
  if (currentSection) {
    currentSection.style.display = "block";
  }
}

// Render lần đầu khi trang tải
renderPage();

// Render lại khi hash thay đổi
window.addEventListener("hashchange", renderPage);

window.addEventListener("beforeunload", (event) => {
  // Nếu có dữ liệu chưa lưu
  if (hasUnsavedChanges) {
    // Hiển thị thông báo xác nhận
    event.preventDefault();
    // Chrome yêu cầu đặt returnValue để hiển thị dialog
    event.returnValue = "";
    // Thông báo (trình duyệt hiện đại sẽ hiển thị thông báo mặc định)
    return "Bạn có dữ liệu chưa lưu. Bạn có chắc muốn rời trang?";
  }
});

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    console.log("Tab đang được hiển thị");
    // Tiếp tục phát video, cập nhật dữ liệu, v.v.
    videoElement.play();
  } else {
    console.log("Tab đã bị ẩn");
    // Tạm dừng video, dừng animation để tiết kiệm tài nguyên
    videoElement.pause();
  }
});

// Khi người dùng mất kết nối
window.addEventListener("offline", () => {
  console.log("Mất kết nối internet!");
  // Hiển thị thông báo cho người dùng
  showNotification("Bạn đã offline. Một số tính năng có thể không hoạt động.");
  // Lưu dữ liệu vào localStorage để tránh mất dữ liệu
  saveDataLocally();
});

// Khi người dùng kết nối trở lại
window.addEventListener("online", () => {
  console.log("Đã kết nối internet trở lại!");
  // Thông báo cho người dùng
  showNotification("Bạn đã online trở lại!");
  // Đồng bộ dữ liệu đã lưu trong localStorage lên server
  syncDataWithServer();
});

// Kiểm tra trạng thái kết nối hiện tại
if (navigator.onLine) {
  console.log("Hiện tại đang online");
} else {
  console.log("Hiện tại đang offline");
}

window.addEventListener("deviceorientation", (event) => {
  // Alpha: Xoay quanh trục z (0-360)
  const alpha = event.alpha;
  // Beta: Xoay quanh trục x (-180 đến 180)
  const beta = event.beta;
  // Gamma: Xoay quanh trục y (-90 đến 90)
  const gamma = event.gamma;

  console.log(`Alpha: ${alpha}, Beta: ${beta}, Gamma: ${gamma}`);

  // Sử dụng thông tin này để điều khiển game, thay đổi UI, v.v.
  updateGameControls(alpha, beta, gamma);
});

if (typeof DeviceOrientationEvent.requestPermission === "function") {
  // iOS 13+ yêu cầu xin quyền
  DeviceOrientationEvent.requestPermission()
    .then((permissionState) => {
      if (permissionState === "granted") {
        window.addEventListener("deviceorientation", handleOrientation);
      }
    })
    .catch(console.error);
} else {
  // Xử lý cho các thiết bị khác
  window.addEventListener("deviceorientation", handleOrientation);
}

// Sử dụng debounce để tránh gọi hàm quá nhiều lần
let resizeTimeout;
window.addEventListener("resize", () => {
  // Hủy timeout cũ nếu có
  clearTimeout(resizeTimeout);

  // Đặt timeout mới
  resizeTimeout = setTimeout(() => {
    console.log("Cửa sổ đã thay đổi kích thước!");
    // Cập nhật layout, tính toán lại kích thước, v.v.
    updateLayout();
  }, 250); // Chỉ thực hiện sau khi người dùng ngừng resize trong 250ms
});

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Element size: ${width}x${height}`);
    // Cập nhật UI dựa trên kích thước mới
  }
});

// Theo dõi một phần tử cụ thể
resizeObserver.observe(document.querySelector(".container"));

const observer = new IntersectionObserver(
  (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log("Phần tử đã xuất hiện trong viewport!");
        // Thực hiện hành động khi phần tử xuất hiện
        entry.target.classList.add("visible");
        // Nếu chỉ cần quan sát một lần, có thể ngừng theo dõi
        observer.unobserve(entry.target);
      }
    });
  },
  {
    root: null, // viewport
    rootMargin: "0px", // margin xung quanh root
    threshold: 0.1, // kích hoạt khi ít nhất 10% phần tử hiển thị
  }
);

// Bắt đầu theo dõi các phần tử
document.querySelectorAll(".lazy-load").forEach((el) => {
  observer.observe(el);
});