Hàm addEventListener() trong JavaScript

• Trần Thị Vân
• 959
• 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ử

Lời kết

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