Phương thức on() của jQuery là cách gắn trình xử lý sự kiện (event handler) trên phần tử. Phần tử truyền cho bộ chọn có thể là bất cứ thứ gì trên trang. Thường dùng, on() gắn trình xử lý click vào nút. Thực tế, on() gắn bất kỳ trình xử lý sự kiện nào vào phần tử được chọn.
Trong hướng dẫn, bao quát cú pháp cơ bản on() và thấy ví dụ thực tế. Quan trọng nhắc jQuery on() chấp nhận đối số tùy chọn không bao quát ở đây. Chúng ta gắn bó đối số bắt buộc và cách dùng phổ biến. Thêm về đối số tùy chọn tìm tại đây.
jQuery on() là gì
Phương thức on() jQuery cung cấp cách ổn định gắn trình xử lý sự kiện vào phần tử được chọn. Khi trình xử lý đặt tên, on() nhận hàm callback. Hàm callback là hàm truyền cho phương thức thực thi sau. Mục đích, hàm callback là nơi điều gì đó xảy ra.
Giả sử dùng on() gắn trình xử lý click trên nút. Hàm callback là nơi định nghĩa hành động xảy ra sau nhấp nút.
Cú pháp on() jQuery
Bây giờ hiểu cách on() hoạt động, xem cú pháp cụ thể. Nhớ mọi jQuery, bắt đầu chọn phần tử. Sau gọi on() gắn trình xử lý. Đối số đầu truyền cho on() là tên trình xử lý, theo sau hàm callback.
$('.btn').on('click', function() {
alert("Bạn đã nhấp nút!")
})
Ở đây, chọn nút, gọi on(), truyền đối số bắt buộc. Chú ý tên trình xử lý phải trong ngoặc kép. Trong hàm callback, hiển thị alert với thông báo. Điều này cho biết callback hoạt động.
Thêm về jQuery alert() tìm tại đây.
Ví dụ jQuery on()
Mở rộng ví dụ nút trên. Bây giờ biết cú pháp cơ bản jQuery on(). Ví dụ, làm gì đó hơn hiển thị alert sau nhấp nút.
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.
Thay vì alert, hiển thị nội dung mới sau nhấp nút. Để làm, dùng phương thức append() jQuery trong hàm callback. jQuery append() gắn nội dung truyền đối số vào cuối phần tử được chọn. Đọc thêm jQuery append() tại đây.
Đầu, hiển thị nút HTML và <div> nơi gắn nội dung mới.
<button class="btn"> Nhấn tôi! </button> <div class="message"> </div>
Điều này hiển thị chỉ nút cho đến nay.
Nút muốn được nhấp! Bây giờ chọn bằng jQuery và hiển thị thông điệp sau nhấp.
$('.btn').on('click', function() {
$('.message').append('Nút đã được nhấp.')
})
Nút chọn bằng tên class và truyền trình xử lý click. Trong callback, gắn thông điệp vào <div> class "message".
Phương thức on() hoạt động! Một lưu ý dùng jQuery append() ở đây: thông điệp gắn cuối <div> mỗi lần nhấp nút. Hãy xem ví dụ khác.
Ví dụ tiếp, thay thế nút bằng nội dung mới sau nhấp. Điều này mô phỏng trải nghiệm người dùng kiểm soát hơn.
<div> <button class="btn"> Nhấn tôi! </button> </div>
Ở đây, bao nút trong <div>. Cho phép dùng jQuery html() thay nút bằng thẻ <p> chứa văn bản. Đôi khi chỉ muốn người dùng nhấp nút một lần dẫn đến nội dung mới!
$('.btn').on('click', function() {
$('div').html('<p>Nút đã được thay thế</p>')
})
Tương tự ví dụ trước, chọn nút và dùng on() gắn trình xử lý click. Trong callback, thay thế HTML nút bằng phần tử đoạn văn chứa HTML mới.
Khi nút nhấp:
Có nội dung mới và không nút! Đây cách mạnh mẽ dẫn dắt trải nghiệm người dùng kiểm soát hơn.
Kết luận
Chúng ta thấy jQuery on() gắn trình xử lý sự kiện vào phần tử trong vài dòng mã mạnh mẽ. Sau học cú pháp cơ bản, xem hai ví dụ jQuery on() dùng. Nó đủ linh hoạt dùng cách cụ thể hoặc chung chung tùy kết quả mong muốn.
Vì hướng dẫn giới thiệu jQuery on(), hãy dành thời gian thực hành. Nhiều cách dùng chờ khám phá khi tiến về thẩm quyền trình xử lý sự kiện!