Kích hoạt sự kiện với phương thức click() của jQuery

Hành động phổ biến nhất khi truy cập trang web là gì? Đó là nhấp chuột! Nhấp chuột là một trong những hành động quan trọng nhất đối với trang web hoặc ứng dụng. Bạn thực hiện hành động này khi điều hướng qua trang web và thêm sản phẩm vào giỏ hàng.

Chẳng hay gì nếu chúng ta có thể biết khi người dùng nhấp vào một phần tử cụ thể trên trang? Sau đó, chúng ta có thể xây dựng trải nghiệm dựa trên hành vi này.

Đó là lúc phương thức click() của jQuery xuất hiện. Chúng ta có thể kích hoạt một sự kiện khi người dùng nhấp chuột chỉ với vài dòng mã. Phương thức này được gọi trên một bộ chọn jQuery và nhận một hàm callback làm đối số. Hàm callback sẽ thực thi mỗi khi phương thức click() phát hiện sự kiện nhấp chuột.

Sử dụng jQuery click()

Chúng ta sẽ hiển thị một nút HTML và thêm văn bản vào trang khi nút được nhấp trong ví dụ dưới đây. Phương thức click() có thể được gắn vào bất kỳ phần tử nào trên trang, nhưng phổ biến nhất là gắn vào nút bấm:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="main">
  <button id="btn-primary"> Nhấn tôi! </button>
  <p class="new-content"></p>
</div>

Mã trên hiển thị một nút cơ bản với id là "btn-primary" bên trong một <div> có id là "main". Mục tiêu của ví dụ này là hiển thị nội dung mới trong thẻ <p> với class "new-content" sau khi nút được nhấp.

Đặt mã jQuery của chúng ta bên trong thẻ <script> và chúng ta có mã sau:

<script>
  $('#btn-primary').click(() => {
    $('.new-content').html("Nút đã được nhấp!")
  })
</script>

Bây giờ chúng ta đã gắn phương thức click() vào id của nút và truyền một hàm callback làm đối số. Hàm callback là một hàm vô danh trả về chuỗi "Nút đã được nhấp!" làm HTML bên trong thẻ <p>. Trước khi xem kết quả, hãy xem lại khái niệm hàm vô danh.

Hàm vô danh đơn giản là một hàm không có tên. Cách sử dụng phổ biến của hàm vô danh là làm callback dưới dạng đối số của một phương thức. Các phương thức callback và hàm vô danh là nền tảng để xây dựng các trang web và ứng dụng phản hồi nhanh.

81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.

Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.

Sau khi đã xem lại một số kiến thức cơ bản về JavaScript, hãy xem mã trên tạo ra kết quả gì. Bắt đầu với nút bên trong <div> "main":

Trình xử lý sự kiện sẽ gọi hàm callback một khi nút được nhấp vì chúng ta đã gắn phương thức click() vào bộ chọn nút. Điều này sẽ dẫn đến hiển thị chuỗi "Nút đã được nhấp" ngay bên dưới nút đó.

Lưu ý rằng vì chúng ta sử dụng phương thức jQuery html(), nội dung chỉ được hiển thị một lần. Ngay cả khi nhấp nút nhiều lần, chỉ có một phiên bản của phần tử <p> được hiển thị. Nếu muốn hiển thị chuỗi mỗi khi nút được nhấp, chúng ta có thể sử dụng append() thay vì html():

<script>
  $('#btn-primary').click(() => {
    $('.new-content').append("Nút đã được nhấp!")
  })
</script>

Nhấp nút ba lần sẽ thấy chuỗi được thêm vào thẻ <p> "nội dung mới" ba lần:

Đây là ví dụ về hàm callback được gọi mỗi khi nút được nhấp. Bạn sẽ nhận thấy phương thức click() của jQuery rất quan trọng để xây dựng trải nghiệm người dùng hấp dẫn khi bạn tiến xa hơn trong hành trình viết mã.

Kết luận

Trong bài viết này, chúng ta đã thảo luận về phương thức click() của jQuery là gì, nó làm gì và nơi thường tìm thấy nó. Chúng ta đã xem ví dụ gắn click() vào nút và hiển thị nội dung mới một lần sau khi nút được nhấp, hoặc nhiều lần tùy theo số lần nhấp.

Phương thức click() của jQuery là cách mạnh mẽ để tạo chức năng cho trang web hoặc ứng dụng trong khi giữ mã nguồn gọn gàng chỉ trong vài dòng. Hãy thử gắn click() vào các phần tử khác ngoài nút bấm và xem điều gì xảy ra!