Events và Event Listeners

Sự kiện là gì?

Sự kiện (event) là tín hiệu xảy ra khi người dùng tương tác với trang (click, gõ phím, cuộn…) hoặc khi trình duyệt thực hiện điều gì đó (tải xong trang, thay đổi kích thước cửa sổ).

Đăng ký trình xử lý sự kiện

element.addEventListener('click', function(event) {
  console.log('Đã click!', event);
});

// Arrow function
element.addEventListener('mouseover', (e) => {
  e.target.style.color = 'red';
});

// Huỷ đăng ký
element.removeEventListener('click', handlerFunction);

Đối tượng Event

Mỗi handler nhận một đối tượng event (thường viết tắt là e) chứa thông tin về sự kiện:

Thuộc tính	Mô tả
`e.target`	Phần tử thực sự nhận sự kiện
`e.currentTarget`	Phần tử đang lắng nghe
`e.type`	Tên sự kiện (`'click'`, `'keydown'`…)
`e.key`	Phím được nhấn (keyboard events)
`e.clientX/Y`	Toạ độ chuột
`e.preventDefault()`	Ngăn hành vi mặc định của trình duyệt
`e.stopPropagation()`	Dừng sự kiện lan lên các phần tử cha

Các sự kiện thông dụng

Nhóm	Tên sự kiện
Chuột	`click`, `dblclick`, `mouseover`, `mouseout`, `mouseenter`, `mouseleave`, `mousemove`
Bàn phím	`keydown`, `keyup`, `keypress` (deprecated)
Form	`input`, `change`, `focus`, `blur`, `submit`, `reset`
Cửa sổ	`load`, `DOMContentLoaded`, `resize`, `scroll`

Event Delegation (uỷ quyền sự kiện)

Thay vì gán handler cho từng phần tử con, gán một handler trên cha và dùng event.target để xác định phần tử con:

document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('done');
  }
});

Lợi ích: Hoạt động ngay cả với các phần tử được thêm vào sau.

Ví dụ: Click counter và hover màu

Kết quả

<div style="font-family:sans-serif;display:flex;gap:1rem;flex-wrap:wrap;align-items:center">
  <div>
    <button id="countBtn">Nhấn tôi</button>
    <span id="counter" style="font-size:1.5rem;font-weight:bold;margin-left:0.5rem">0</span>
  </div>
  <div id="hoverBox"
    style="width:100px;height:60px;background:#4472c4;color:white;
           display:flex;align-items:center;justify-content:center;
           border-radius:6px;cursor:pointer;transition:background 0.3s;user-select:none">
    Di chuột vào
  </div>
</div>

// Click counter
let count = 0;
const btn     = document.getElementById('countBtn');
const counter = document.getElementById('counter');

btn.addEventListener('click', () => {
  count++;
  counter.textContent = count;
  if (count >= 10) counter.style.color = '#e74c3c';
});

// Hover màu ngẫu nhiên
const box    = document.getElementById('hoverBox');
const colors = ['#e74c3c','#2ecc71','#f39c12','#9b59b6','#1abc9c'];

box.addEventListener('mouseenter', () => {
  box.style.background = colors[Math.floor(Math.random() * colors.length)];
  box.textContent = '🎨';
});
box.addEventListener('mouseleave', () => {
  box.style.background = '#4472c4';
  box.textContent = 'Di chuột vào';
});

Ví dụ: Bàn phím và Event Delegation