addEventListener JavaScript là gì? Hướng dẫn toàn tập từ A-Z

Trong thế giới lập trình web hiện đại, việc tạo ra các trang web tương tác, phản hồi lại hành động của người dùng là yếu tố cốt lõi. Trái tim của sự tương tác này chính là cơ chế xử lý sự kiện (event handling). Và khi nói đến xử lý sự kiện trong JavaScript, addEventListener là phương thức mạnh mẽ, linh hoạt và được khuyên dùng nhất.

Bài viết này sẽ là kim chỉ nam chi tiết, giúp bạn hiểu rõ addEventListener là gì, tại sao nó lại vượt trội hơn các phương thức cũ, và làm thế nào để sử dụng nó một cách hiệu quả trong các dự án của bạn.

1. addEventListener JavaScript là gì?

addEventListener() là một phương thức của Web APIs, cho phép bạn thiết lập một hàm (function) sẽ được gọi bất cứ khi nào một sự kiện (event) xác định được gửi đến một đối tượng (target).

Nói một cách đơn giản hơn: Bạn “lắng nghe” một sự kiện cụ thể (như click, mouseover, keydown) trên một phần tử HTML cụ thể (như một nút bấm, một hình ảnh, hoặc toàn bộ trang). Khi sự kiện đó xảy ra, hàm bạn đã chỉ định sẽ tự động được thực thi.

<button id="myButton">Click vào tôi!</button>

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
  alert('Nút đã được click!');
});

Trong ví dụ trên, chúng ta đã “lắng nghe” sự kiện click trên nút có id là myButton. Khi người dùng click vào nút này, một hộp thoại alert sẽ hiện lên.

Xem thêm:

• Concat Array JavaScript là gì: Hướng Dẫn Chi Tiết Ghép Mảng Hiệu Quả trong JS
• Vanilla JavaScript Là Gì? Giải Mã Sức Mạnh Thuần Khiết Của JavaScript

2. Tại sao nên sử dụng addEventListener javaScript?

Trước đây, các lập trình viên thường gán sự kiện trực tiếp qua các thuộc tính như onclick, onmouseover.

// Cách làm cũ
button.onclick = function() {
  console.log('Button clicked!');
};

Tuy nhiên, addEventListener mang lại nhiều lợi ích vượt trội:

• Gán nhiều hàm xử lý cho cùng một sự kiện: Với onclick, bạn chỉ có thể gán một hàm. Nếu bạn gán một hàm mới, nó sẽ ghi đè lên hàm cũ. addEventListener cho phép bạn thêm bao nhiêu hàm xử lý tùy thích.
  JavaScript

  Đã copy xong!

  button.addEventListener('click', function1);
  button.addEventListener('click', function2); // Cả function1 và function2 đều sẽ chạy

  Copy
• Kiểm soát giai đoạn sự kiện (Event Phase): addEventListener cho phép bạn chỉ định lắng nghe sự kiện ở giai đoạn “nổi bọt” (bubbling) hay giai đoạn “bắt giữ” (capturing). Đây là một khái niệm nâng cao nhưng cực kỳ quan trọng để xử lý các sự kiện phức tạp. Chúng ta sẽ tìm hiểu kỹ hơn ở phần sau.
• Tách biệt code rõ ràng: Giúp tách bạch giữa cấu trúc HTML và logic JavaScript, làm cho mã nguồn sạch sẽ, dễ đọc và dễ bảo trì hơn. Bạn không cần phải viết onclick="..." trực tiếp trong file HTML.
• Hoạt động trên mọi đối tượng DOM: Nó không chỉ hoạt động với các phần tử HTML mà còn với các đối tượng khác như document, window, và cả XMLHttpRequest.

3. Cú pháp chi tiết của addEventListener javaScript

Cú pháp đầy đủ của phương thức này như sau:

target.addEventListener(event, handler, options);

Hãy cùng phân tích từng tham số:

a. target

Đây là đối tượng mà bạn muốn theo dõi sự kiện. Nó có thể là:

• Một phần tử HTML đơn lẻ (ví dụ: document.getElementById('myButton')).
• Đối tượng document (để lắng nghe các sự kiện trên toàn bộ tài liệu).
• Đối tượng window (để lắng nghe các sự kiện liên quan đến cửa sổ trình duyệt như resize, scroll).

b. event

Là một chuỗi (string) xác định tên của sự kiện mà bạn muốn lắng nghe. Một số sự kiện phổ biến bao gồm:

• Sự kiện chuột: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove.
• Sự kiện bàn phím: keydown, keyup, keypress.
• Sự kiện biểu mẫu (form): submit, change, focus, blur.
• Sự kiện cửa sổ/tài liệu: load, DOMContentLoaded, resize, scroll.

c. handler (hoặc listener)

Đây là hàm (function) sẽ được gọi khi sự kiện xảy ra. Hàm này tự động nhận một đối tượng Event làm tham số đầu tiên, chứa thông tin chi tiết về sự kiện đã xảy ra (ví dụ: tọa độ chuột, phím nào đã được nhấn).

function handleClick(event) {
  console.log('Sự kiện đã xảy ra:', event);
  console.log('Loại sự kiện:', event.type); // 'click'
  console.log('Đối tượng mục tiêu:', event.target); // <button id="myButton">...</button>
}

button.addEventListener('click', handleClick);

d. options (Không bắt buộc)

Đây là một đối tượng tùy chọn để cấu hình hành vi của listener. Các tùy chọn quan trọng là:

• capture (boolean): Mặc định là false. Nếu là true, handler sẽ được thực thi trong giai đoạn “bắt giữ” (capturing phase) thay vì “nổi bọt” (bubbling phase).
• once (boolean): Mặc định là false. Nếu là true, handler sẽ tự động bị gỡ bỏ sau khi được thực thi lần đầu tiên. Rất hữu ích cho các hành động chỉ cần làm một lần.
• passive (boolean): Mặc định là false. Nếu là true, nó báo cho trình duyệt rằng handler sẽ không gọi event.preventDefault(). Điều này giúp tối ưu hóa hiệu suất, đặc biệt với các sự kiện scroll và touch trên thiết bị di động.

4. Event Bubbling và Event Capturing

Đây là khái niệm cốt lõi khi làm việc với sự kiện DOM. Khi một sự kiện xảy ra trên một phần tử lồng nhau, nó sẽ đi qua 3 giai đoạn:

1. Giai đoạn Bắt giữ (Capturing Phase): Sự kiện di chuyển từ đối tượng window xuống qua các phần tử cha cho đến phần tử mục tiêu.
2. Giai đoạn Mục tiêu (Target Phase): Sự kiện đến được phần tử mục tiêu nơi nó bắt đầu.
3. Giai đoạn Nổi bọt (Bubbling Phase): Sự kiện di chuyển ngược từ phần tử mục tiêu lên qua các phần tử cha, trở lại đối tượng window.

Mặc định, addEventListener lắng nghe ở giai đoạn Nổi bọt. Bằng cách đặt { capture: true }, bạn có thể lắng nghe ở giai đoạn Bắt giữ.

5. Gỡ bỏ sự kiện với removeEventListener

Việc gỡ bỏ các listener khi không còn cần thiết là một thực hành tốt để tránh rò rỉ bộ nhớ (memory leaks), đặc biệt trong các ứng dụng trang đơn (Single Page Applications).

Cú pháp của nó tương tự như addEventListener:

target.removeEventListener(event, handler, options);

Lưu ý quan trọng: Để có thể gỡ bỏ một listener, bạn phải truyền vào cùng một hàm handler đã được sử dụng khi thêm nó. Điều này có nghĩa là bạn không thể gỡ bỏ một listener đã được định nghĩa bằng hàm ẩn danh (anonymous function).

// SAI CÁCH - KHÔNG THỂ GỠ BỎ
button.addEventListener('click', function() {
  console.log('Clicked!');
});

// Hàm ẩn danh này là một đối tượng khác, nên không thể gỡ bỏ
button.removeEventListener('click', function() {
  console.log('Clicked!');
});


// ĐÚNG CÁCH
function onButtonClick() {
  console.log('Clicked!');
}

// Thêm listener
button.addEventListener('click', onButtonClick);

// Gỡ bỏ listener
button.removeEventListener('click', onButtonClick);

6. Các lỗi thường gặp và cách khắc phục

1. Gắn listener cho phần tử không tồn tại:
   • Lỗi: TypeError: Cannot read properties of null (reading 'addEventListener').
   • Nguyên nhân: Script JavaScript của bạn chạy trước khi HTML được tải xong, nên document.getElementById(...) trả về null.
   • Giải pháp: Đặt thẻ <script> ở cuối <body> hoặc bao bọc code của bạn trong sự kiện DOMContentLoaded.
     JavaScript

     Đã copy xong!

     document.addEventListener('DOMContentLoaded', function() {
       // Toàn bộ code JS của bạn ở đây
       const button = document.getElementById('myButton');
       button.addEventListener('click', () => alert('Hello!'));
     });

     Copy
2. Gọi hàm thay vì truyền tham chiếu hàm:
   • Lỗi: Hàm xử lý chạy ngay lập tức khi tải trang, không đợi sự kiện.
   • Nguyên nhân: Bạn đã viết myFunction() thay vì myFunction. Dấu () sẽ thực thi hàm ngay lập tức.
   • Giải pháp: Chỉ truyền tên hàm (tham chiếu).
     JavaScript

     Đã copy xong!

     // SAI
     button.addEventListener('click', alert('Clicked!'));
     
     // ĐÚNG
     button.addEventListener('click', function() {
         alert('Clicked!');
     });
     // HOẶC
     function myAlert() {
         alert('Clicked!');
     }
     button.addEventListener('click', myAlert);

     Copy

7. Câu hỏi thường gặp (FAQ)

addEventListener khác gì onclick? addEventListener cho phép gán nhiều hàm xử lý, kiểm soát giai đoạn sự kiện (bubbling/capturing), và giúp code sạch hơn. onclick chỉ gán được một hàm và sẽ bị ghi đè.

event.preventDefault() là gì? Nó ngăn chặn hành vi mặc định của trình duyệt đối với một sự kiện. Ví dụ, ngăn một thẻ <a> chuyển trang khi được click, hoặc ngăn một form được gửi đi.

event.stopPropagation() là gì? Nó ngăn sự kiện tiếp tục lan truyền trong các giai đoạn bubbling hoặc capturing, tránh việc các hàm xử lý ở phần tử cha bị kích hoạt.

Kết luận

addEventListener là một công cụ nền tảng và không thể thiếu đối với bất kỳ lập trình viên JavaScript nào. Bằng cách nắm vững cú pháp, các tùy chọn, và các khái niệm liên quan như bubbling và capturing, bạn có thể xây dựng các ứng dụng web phức tạp, hiệu quả và có khả năng tương tác cao. Hãy bắt đầu áp dụng nó ngay hôm nay để đưa kỹ năng lập trình web của bạn lên một tầm cao mới.