Tìm kiếm

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

  1. Inline Event Handlers:
    • Đặt trực tiếp trong thẻ HTML.
      • <button onclick="myFunction()">Click me</button>
  2. DOM Event Handlers:
    • Đặ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
};
  3. addEventListener:
    • 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
});
  4. Event Object:
    • 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
});
  5. Remove Event Listener:
    • Để 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);
}
  6. Bubbling and Capturing:
    • 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)
  7. Event Delegation:
    • Á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
    }
});
  8. Event Object Properties:
    • Đố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
});
  9. Key Events:
    • 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
    }
});
  10. Mouse Events:
    • 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ử
});
  11. Form Events:
    • 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
});
  12. Touch Events:
    • 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
});
  13. Custom Events:
    • 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);
  14. Throttle và Debounce:
    • 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);
    };
}
  15. Animation Events:
    • 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
});
  16. WebSockets Events:
    • 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
});
  17. Window Events:
    • 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
});
  18. History API Events:
    • 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ử
});
  19. Offline/Online Events:
    • 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
});
  20. Pointer Events:
    • 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
});
  21. Animation Events:
    • 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
});
  22. WebSockets Events:
    • 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
});
  23. Window Events:
    • 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
});
  24. History API Events:
    • 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ử
});
  25. Offline/Online Events:
    • 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
});
  26. Pointer Events:
    • 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
});
Tags

Bạn có thể thích những bài đăng này

Nhận xét

Mới hơn Cũ hơn