Sự kiện click() trong JavaScript

• Trần Thị Vân
• 1314
• 25/08/2025

Chức năng của Sự kiện click() trong JavaScript

Sự kiện click() trong JavaScript dùng để xử lý sự kiện click chuột vào nút gửi hay một trong những thẻ HTML nào đó.

Các cách gán Sự kiện click() trong JavaScript

Sự kiện click() gán trực tiếp trong JavaScript

onclick="xemTuoi()"

<label for="tuoi">Nhập tuổi của bạn</label>
<input id="tuoi" placeholder="Nhập tuổi"> <br>
<input type="button" onclick="xemTuoi()" value="GỬI">
<script>
function xemTuoi(){
var tuoi = document.getElementById('tuoi').value;
alert("Bạn "+tuoi+" tuổi!");
}
</script>

Chạy Thử

Sự kiện click() không gán trực tiếp trong JavaScript

xemtuoi.addEventListener('click', function() {
alert("Bạn "+tuoi+" tuổi!");
});

<label for="tuoi">Nhập tuổi của bạn</label>
<input id="tuoi" placeholder="Nhập tuổi"> <br>
<input type="button" id="xemtuoi"  value="GỬI">
<script>
var xemtuoi = document.getElementById('xemtuoi');
xemtuoi.addEventListener('click', function() {
var tuoi = document.getElementById('tuoi').value;
alert("Bạn "+tuoi+" tuổi!");
});
</script>

Chạy Thử

Sự kiện click() vào class trong JavaScript

$(".sanpham").click(function() {
  alert("ID Sản phẩm là: "+id);
});

<div class="sanpham" data-id="1" >Clilck để lấy ID SẢN PHẨM: 1</div>
<div class="sanpham" data-id="2" >Clilck để lấy ID SẢN PHẨM: 2</div>
<div class="sanpham" data-id="3" >Clilck để lấy ID SẢN PHẨM: 3</div>
<script src="https://webmoi.vn/media/js/jquery-3.6.0.js"></script>
<script>
$(".sanpham").click(function() {
  var id = $(this).attr("data-id");
  alert("ID Sản phẩm là: "+id);
});
</script>

Chạy Thử

Những lưu ý khi sử dụng sự kiện click() trong JavaScript

Khi xử lý thao tác nhấp chuột, việc chọn đúng cách gắn sự kiện sẽ giúp mã JavaScript dễ quản lý và hạn chế lỗi phát sinh. Với các trang có nhiều phần tử tương tác, nên chú ý đến cách chọn phần tử, số lần đăng ký sự kiện và phương thức xử lý phù hợp.

Phân biệt click() và addEventListener('click')

click() thường được dùng để kích hoạt thao tác nhấp trên một phần tử đã chọn, phù hợp với những tình huống đơn giản. Trong khi đó, addEventListener('click') là cách đăng ký trình xử lý sự kiện linh hoạt hơn, đặc biệt hữu ích khi một phần tử cần nhiều hành vi khác nhau.

Chẳng hạn, nếu chỉ cần kích hoạt thao tác nhấp trên một nút, click() có thể đáp ứng nhanh chóng. Nếu cần quản lý nhiều hàm hoặc muốn chủ động thêm, thay thế và gỡ từng trình xử lý, addEventListener() thường là lựa chọn phù hợp hơn.

Kiểm tra phần tử trước khi gán sự kiện click()

Một lỗi phổ biến là JavaScript chạy trước khi phần tử HTML tồn tại hoặc bộ chọn không tìm thấy phần tử cần thao tác. Khi đó, việc gọi phương thức trên giá trị không tồn tại có thể khiến đoạn mã phát sinh lỗi.

Vì vậy, nên kiểm tra kết quả tìm kiếm phần tử trước khi gắn sự kiện, đồng thời bảo đảm mã JavaScript được thực thi sau khi giao diện cần tương tác đã sẵn sàng.

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

if (button) {
    button.addEventListener('click', function () {
        console.log('Đã nhấp vào nút');
    });
}

Tránh gán nhiều sự kiện click không cần thiết

Nếu cùng một phần tử bị gắn nhiều trình xử lý cho cùng một thao tác, một lần nhấp có thể khiến nhiều đoạn mã cùng chạy. Điều này dễ tạo ra hành vi lặp, thay đổi giao diện nhiều lần hoặc thực hiện một tác vụ vượt quá mong muốn.

Khi xây dựng chức năng, nên xác định rõ mỗi thao tác nhấp cần thực hiện điều gì và chỉ đăng ký những trình xử lý thực sự cần thiết. Với giao diện phức tạp, việc tổ chức sự kiện ngay từ đầu sẽ giúp mã dễ kiểm tra và bảo trì hơn.

Xử lý click cho nhiều phần tử cùng lúc

Khi một nhóm phần tử có cùng hành vi, không nên viết riêng một đoạn xử lý cho từng phần tử nếu cách làm đó tạo ra nhiều mã lặp. Có thể chọn toàn bộ nhóm phần tử rồi duyệt qua chúng để gắn cùng một logic.

const buttons = document.querySelectorAll('.button');

buttons.forEach(function (button) {
    button.addEventListener('click', function () {
        console.log('Một phần tử đã được nhấp');
    });
});

Cách tổ chức này đặc biệt hữu ích với danh sách nút, menu hoặc các thành phần giao diện được tạo theo cùng một mẫu. Khi cần thay đổi hành vi, chỉ cần chỉnh logic chung thay vì sửa từng phần tử.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Sự kiện click() trong JavaScript.