-
Inline Event Handlers:
- Đặt trực tiếp trong thẻ HTML.
<button onclick="myFunction()">Click me</button>
-
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() {
};
-
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() {
});
-
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) {
});
-
Remove Event Listener:
-
Để loại bỏ một xử lý sự kiện được thêm trước đó.
function myFunction() {
document.getElementById("myButton").removeEventListener("click", myFunction);
}
-
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() {
}, false);
-
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") {
}
});
-
Event Object Properties:
-
Key Events:
-
Mouse Events:
-
Form Events:
-
Touch Events:
-
Custom Events:
-
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.
function throttle(func, delay) {
let inThrottle;
return function() {
if (!inThrottle) {
func();
inThrottle = true;
setTimeout(() => inThrottle = false, delay);
}
};
}
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => func(), delay);
};
}
-
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() {
});
-
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) {
});
-
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() {
});
-
History API Events:
-
Sự kiện
popstate
khi lịch sử trình duyệt thay đổi.
window.addEventListener("popstate", function(event) {
});
-
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() {
});
window.addEventListener("offline", function() {
});
-
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) {
});
-
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() {
});
-
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) {
});
-
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() {
});
-
History API Events:
-
Sự kiện
popstate
khi lịch sử trình duyệt thay đổi.
window.addEventListener("popstate", function(event) {
});
-
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() {
});
window.addEventListener("offline", function() {
});
-
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) {
});
Nhận xét