Sự kiện (Event) trong JavaScript là gì?

Định nghĩa

Event (sự kiện) là hành động xảy ra trên trang web: user click, load trang, nhấn phím, resize cửa sổ, submit form... JS phản ứng qua event handler.

Các loại sự kiện phổ biến

Cách gán Event Handler

1. HTML attribute (cũ, không khuyến khích)

<button onclick="alert('Hi')">Click</button>

2. DOM Property (cũ)

btn.onclick = function() { alert('Hi'); };
// Chỉ 1 handler cho 1 event

3. addEventListener (chuẩn, khuyên dùng)

btn.addEventListener('click', function(e) {
  alert('Hi');
});
// Nhiều handler cho 1 event, có options (capture, once, passive)

Event Object

Handler nhận tham số event (hoặc e) chứa thông tin:

• e.type: loại event ('click')
• e.target: element trigger event
• e.currentTarget: element gán handler
• e.preventDefault(): chặn hành vi mặc định (link, submit)
• e.stopPropagation(): chặn bubbling
• e.clientX/Y, e.key, v.v.

Event Flow: Capturing → Target → Bubbling

// Capturing phase (trickle down)
document.addEventListener('click', handler, true);

// Bubbling phase (mặc định, bubble up)
element.addEventListener('click', handler); // hoặc false

Best practice

• Dùng addEventListener.
• Dùng event delegation (gán cho parent, kiểm tra e.target) cho danh sách động.
• Remove listener khi không cần: removeEventListener (cần tham chiếu cùng function).
• Passive listeners cho scroll/touch: {passive: true}.