1. Chuỗi Sự Kiện Nhấn Chuột
| Tên Sự Kiện | Mô Tả Kỹ Thuật |
|---|---|
| click | Kích hoạt sau khi nhấn giữ và nhả nút chuột trái hoàn tất trên một thành phần. |
| mousedown | Kích hoạt ngay tại thời điểm lực nhấn vào nút chuột trái được áp dụng. |
| mouseup | Kích hoạt ngay tại thời điểm nhả lực khỏi nút chuột trái. |
| dblclick | Kích hoạt khi phát hiện chuỗi hành vi nhấp hai lần liên tiếp trong khoảng thời gian cho phép của hệ điều hành. |
Trình tự thực thi khi nhấp đơn:
mousedown → mouseup → clickTrình tự thực thi khi nhấp đúp:
(mousedown → mouseup → click) × 2 → dblclick<script>
const targetDoc = document.documentElement;
targetDoc.addEventListener('mousedown', () => console.log('🔽 Sự kiện mousedown'));
targetDoc.addEventListener('mouseup', () => console.log('🔼 Sự kiện mouseup'));
targetDoc.addEventListener('click', () => console.log('⚡ Sự kiện click'));
targetDoc.addEventListener('dblclick', () => console.log('🔄 Sự kiện dblclick'));
</script>
2. Cơ Chế Di Chuyển Con Trỏ Trên Vùng Thành Phần
| Tên Sự Kiện | Mô Tả Kỹ Thuật |
|---|---|
| mouseenter | Chỉ kích hoạt khi con trỏ bước vào vùng bounds của thành phần chính. Bỏ qua việc đi qua các phần tử con. |
| mouseleave | Chỉ kích hoạt khi con trỏ rời hoàn toàn ra ngoài vùng bounds của thành phần chính. |
| mouseover | Kích hoạt khi con trỏ vào thành phần cha VÀ mỗi lần di chuyển từ phần tử này sang phần tử con bên trong nó. |
| mouseout | Kích hoạt khi con trỏ rời thành phần cha VÀ mỗi lần thoát khỏi phần tử con để quay lại vùng trống của cha. |
Lưu ý: mouseover và mouseout xử lý từng thành phần riêng lẻ, dẫn đến hiện tượng bắn sự kiện nhiều lần khi con trỏ quét qua cấu trúc phân cấp DOM (bubbling).
<script>
const wrapperArea = document.getElementById('container-box');
wrapperArea.addEventListener('mouseenter', () => console.log('➡️ Entered parent zone'));
wrapperArea.addEventListener('mouseleave', () => console.log('⬅️ Left parent zone'));
wrapperArea.addEventListener('mouseover', (evt) => console.log(`🌊 Over element: ${evt.target.id || 'root'}`));
wrapperArea.addEventListener('mouseout', (evt) => console.log(`🍂 Out from: ${evt.relatedTarget?.id || 'parent'}`));
</script>
3. Sự Kiện Cập Nhật Trạng Thái Đầu Vào (change)
Được gắn mặc định cho các thẻ quản lý dữ liệu như <input>, <select> và <textarea>. Khác với input (bắn liên tục khi gõ), change chỉ kích hoạt khi người dùng xác nhận hoặc bỏ trường nhập liệu.
<script>
function bindChangeHandler(selector) {
const elements = document.querySelectorAll(selector);
elements.forEach(field => {
field.addEventListener('change', function() {
console.log(`[Change] Trường ${this.name}: giá trị mới là "${this.value}"`);
});
});
}
bindChangeHandler('input[type="text"], input[name="gender"], input[name="hobby"], select, textarea');
</script>
4. Hệ Thống Xử LýINPUT Bàn Phím
| Tên Sự Kiện | Mô Tả Kỹ Thuật |
|---|---|
| keydown | Kích hoạt tức thì khi lực nhấn phím được truyền xuống trình duyệt. Hỗ trợ lặp nếu giữ lâu (tùy hệ thống OS). |
| keypress | Kích hoạt đối với các phím tạo ký tự ASCII. Không kích hoạt phím chức năng thuần túy (Ctrl, Alt, Shift, Meta). Ưu tiên thấp hơn keydown. |
| keyup | Kích hoạt ngay khi lực nhấn trên phím được thả lỏng hoàn toàn. |
Trình tự ngắn (nhấn rồi thả nhanh):
keydown → keypress → keyupTrình tự dài (giữ phím liên tục):
(keydown → keypress) 🔁 Lặp lại → ... → keyup<script>
document.addEventListener('keydown', function(evt) {
console.log(`🔻 Keydown: mã ${evt.code}, phím "${evt.key}"`);
});
document.addEventListener('keypress', function(evt) {
console.log(`📝 Keypress: ký tự "${evt.key}" được ghi nhận`);
});
document.addEventListener('keyup', function(evt) {
console.log(`🔺 Keyup: phím "${evt.key}" đã được nhả`);
});
</script>
5. Quản Lý Tiêu Điểm (Focus & Blur)
Sự kiện focus kích hoạt khi thành phần nhận quyền điều khiển nhập liệu hoặc khi cửa sổ trình duyệt quay trở thành cửa sổ active. Ngược lại, blur kích hoạt khi mất tiêu điểm hoặc chuyển sang ứng dụng khác.
<script>
const inputField = document.querySelector('#user-input');
// Theo dõi trạng thái tiêu điểm cục bộ trên trường nhập
inputField.addEventListener('focus', () => console.log('🎯 Input received focus'));
inputField.addEventListener('blur', () => console.log('💨 Input lost focus'));
// Theo dõi trạng thái tiêu điểm toàn cục của trình duyệt
window.addEventListener('focus', () => console.log('🖥️ Browser window became active'));
window.addEventListener('blur', () => console.log('⏹️ Browser window lost focus'));
</script>