Hàm addEventListener() trong JavaScript

• Trần Thị Vân
• 998
• 26/08/2025

Chức năng của Hàm addEventListener() trong JavaScript

Hàm addEventListener() trong JavaScript dùng để xử lý sự kiện click, change, keyup,... cho các đối tượng HTML.

Cách sử dụng Hàm addEventListener() trong JavaScript

// Lấy đối tượng HTML, là id hoặc Class, để lấy class bạn hãy dùng document.querySelector
const idthehtml = document.getElementById('idthehtml');
// dùng tên đối tượng HTML vừa lấy để addEventListener
idthehtml.addEventListener('click', function() {
  // code xử lý, ví dụ hiện lên 1 thông báo
  alert('Bạn vừa click nút!'); 
   
});
// click là tên các sự kiện, thường tên các sự kiện mặc định bỏ đi chữ on phía trước

Các loại sự kiện của Hàm addEventListener() trong JavaScript

Sự kiện click của Hàm addEventListener() trong JavaScript

Sự kiện này xử lý khi bạn nhấn click vào nút:

btngui.addEventListener('click', function() {
alert(tuoi+" tuổi"); 
});

<input type="text" id="tuoi" placeholder="Nhập tuổi" ><br>
<input type="button" id="btngui" value="GỬI" >

<script>
// Lấy đối tượng HTML
var btngui = document.getElementById('btngui');
// dùng tên đối tượng HTML vừa lấy để addEventListener
btngui.addEventListener('click', function() {
var idtuoi = document.getElementById('tuoi');
var tuoi =  idtuoi.value;
alert(tuoi+" tuổi"); 
});
</script>

Chạy Thử

Sự kiện keyup của Hàm addEventListener() trong JavaScript

Sự kiện này xử lý khi nhập hay xóa ký tự nào vào ô input:

tuoi.addEventListener('keyup', function() {
if(sotuoi<18||sotuoi>40){
 alert("Bạn phải nhập tuổi từ 18 tới 40"); 
}
});

<input type="text" id="tuoi" placeholder="Nhập tuổi từ 18 tới 40" >

<script>
// Lấy đối tượng HTML
var tuoi= document.getElementById('tuoi');
// dùng tên đối tượng HTML vừa lấy để addEventListener
tuoi.addEventListener('keyup', function() {
var sotuoi =  tuoi.value;
if(sotuoi<18||sotuoi>40){
 alert("Bạn phải nhập tuổi từ 18 tới 40"); 
}
});
</script>

Chạy Thử

Sự kiện change của Hàm addEventListener() trong JavaScript

Sự kiện này thường xử lý khi người dùng chọn một phần tử trong thẻ select:

tinhthanh.addEventListener('change', function() {
 alert(tentinhthanh); 
});

<select id="tinhthanh">
 <option value="Hồ Chí Minh">Hồ Chí Minh</option>
 <option value="Đà Nẳng">Đà Nẳng</option>
 <option value="Hà Nội">Hà Nội</option>
</select>

<script>
// Lấy đối tượng HTML
var tinhthanh= document.getElementById('tinhthanh');
// dùng tên đối tượng HTML vừa lấy để addEventListener
tinhthanh.addEventListener('change', function() {
var tentinhthanh =  tinhthanh.value;
 alert(tentinhthanh); 
});
</script>

Chạy Thử

Khi nào nên dùng addEventListener() trong JavaScript?

addEventListener() phù hợp khi JavaScript cần phản hồi với các hành động của người dùng hoặc những thay đổi xảy ra trên trang. Thay vì gắn trực tiếp mã xử lý vào HTML, bạn có thể đăng ký sự kiện ngay trong JavaScript và kiểm soát cách chương trình phản hồi rõ ràng hơn.

Khi cần xử lý nhiều sự kiện trên cùng một phần tử

Một phần tử có thể cần phản ứng với nhiều loại sự kiện khác nhau. Chẳng hạn, một nút vừa thực hiện hành động khi được nhấp, vừa thay đổi trạng thái khi người dùng đưa chuột vào. addEventListener() cho phép đăng ký từng sự kiện riêng biệt mà không làm ghi đè các trình xử lý đã có.

Cách này đặc biệt hữu ích khi một thành phần trên giao diện có nhiều tương tác và mỗi tương tác đảm nhiệm một nhiệm vụ khác nhau.

Khi muốn tách JavaScript khỏi HTML

Đưa logic xử lý sự kiện vào JavaScript giúp phần HTML tập trung vào cấu trúc nội dung, còn JavaScript đảm nhiệm hành vi của giao diện. Cách tổ chức này giúp mã nguồn dễ đọc, thuận tiện bảo trì và hạn chế việc trộn lẫn cấu trúc với logic xử lý.

Ví dụ, thay vì viết mã xử lý trực tiếp trong thuộc tính sự kiện của phần tử, có thể xác định phần tử rồi đăng ký sự kiện từ JavaScript:

const button = document.querySelector('#button');

button.addEventListener('click', function() {
    console.log('Nút đã được nhấp');
});

Khi giao diện phát triển lớn hơn, cách tách này giúp việc tìm kiếm, thay đổi hoặc mở rộng hành vi của từng thành phần thuận tiện hơn.

Khi cần quản lý và gỡ sự kiện linh hoạt

Trong những giao diện có trạng thái thay đổi liên tục, việc chỉ đăng ký sự kiện là chưa đủ. Có trường hợp cần tạm ngừng một trình xử lý hoặc loại bỏ nó khi thành phần không còn được sử dụng. addEventListener() kết hợp với removeEventListener() giúp kiểm soát vòng đời của trình xử lý sự kiện rõ ràng hơn.

Điều này có ý nghĩa khi làm việc với các thành phần được tạo, cập nhật hoặc loại bỏ động. Quản lý sự kiện đúng cách cũng giúp hạn chế tình trạng một hành động vô tình kích hoạt cùng một logic nhiều lần.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm addEventListener() trong JavaScript.