JQuery on() phương thức là một cách để đính kèm một trình xử lý sự kiện trên một phần tử. Phần tử được chuyển đến bộ chọn có thể là bất kỳ thứ gì trên trang. Thông thường nhất, on() là một cách để gắn một trình xử lý nhấp chuột vào một nút. Trên thực tế, on() có thể đính kèm bất kỳ trình xử lý sự kiện nào vào bất kỳ phần tử đã chọn nào.
Trong hướng dẫn này, chúng tôi sẽ trình bày cú pháp cơ bản cho on() và xem một số ví dụ thực tế trong hành động. Điều quan trọng cần đề cập là jQuery on() chấp nhận các đối số tùy chọn sẽ không được đề cập ở đây. Chúng ta sẽ bám vào các đối số bắt buộc và cách sử dụng phổ biến. Có thể tìm thấy thêm về các đối số tùy chọn tại đây.
jQuery on ()
là gì
JQuery on() phương thức cung cấp một cách ổn định để đính kèm một trình xử lý sự kiện vào một phần tử đã chọn. Khi trình xử lý được đặt tên, on() có một chức năng gọi lại. Hàm gọi lại là một hàm được chuyển cho một phương thức thực thi sau đó. Đối với mục đích của chúng tôi, hàm gọi lại là nơi điều gì đó sẽ xảy ra.
Giả sử chúng ta đã sử dụng on() để đính kèm một trình xử lý sự kiện nhấp chuột trên một nút. Chức năng gọi lại của chúng tôi là nơi chúng tôi sẽ xác định hành động nào sẽ xảy ra sau khi nút được nhấp.
on () Cú pháp jQuery
Bây giờ chúng ta đã có ý tưởng về cách on() hoạt động, hãy xem cú pháp cụ thể của nó. Hãy nhớ rằng trong tất cả jQuery, chúng tôi bắt đầu với việc chọn phần tử của chúng tôi. Sau đó, chúng tôi gọi on() để đính kèm trình xử lý sự kiện của chúng tôi. Đối số đầu tiên được chuyển tới on() là tên của chính trình xử lý sự kiện và được theo sau bởi hàm gọi lại.
$('.btn').on('click', function() {
alert("You clicked the button!")
})
Ở đây, chúng tôi đang chọn nút của mình, gọi on() và chuyển các đối số bắt buộc của chúng tôi. Lưu ý rằng tên của trình xử lý sự kiện phải có trong dấu ngoặc kép. Trong chức năng gọi lại của chúng tôi, chúng tôi đang hiển thị cảnh báo bằng tin nhắn. Điều này cho chúng tôi biết chức năng gọi lại đang hoạt động bình thường.
Tìm hiểu thêm về jQuery alert() có thể được tìm thấy ở đây.
jQuery on () Ví dụ
Hãy mở rộng ví dụ về nút ở trên của chúng tôi. Bây giờ chúng ta biết cú pháp cơ bản hoạt động như thế nào đối với jQuery on() . Đối với ví dụ của chúng tôi, hãy làm điều gì đó hơn là hiển thị thông báo cảnh báo sau khi nút được nhấp.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình 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 công việc đầu tiên của họ.
Thay vì thông báo cảnh báo, chúng tôi có thể hiển thị nội dung mới sau khi nhấp vào nút. Để làm điều này, chúng tôi sẽ sử dụng jQuery append() phương thức bên trong hàm gọi lại của chúng tôi. jQuery append() đính kèm nội dung được truyền dưới dạng đối số vào cuối phần tử đã chọn. Đọc thêm về jQuery append() đây.
Để bắt đầu, chúng tôi đang hiển thị một nút HTML và một
<button class="btn"> Click me! </button> <div class="message"> </div>
Điều này sẽ chỉ hiển thị nút bây giờ.
Có nút của chúng tôi muốn được nhấp vào! Bây giờ, chúng tôi chọn nó bằng jQuery và có một thông báo hiển thị sau khi nó được nhấp vào.
$('.btn').on('click', function() {
$('.message').append('The button has been clicked.')
}) Nút của chúng tôi được chọn theo tên lớp của nó và được chuyển qua một trình xử lý sự kiện nhấp chuột. Trong hàm gọi lại của chúng tôi, chúng tôi đang thêm một thông báo vào
on() của chúng tôi phương pháp hoạt động! Một điều cần lưu ý khi sử dụng jQuery append() ở đây là thông báo của chúng tôi sẽ được đính kèm vào cuối
Trong ví dụ tiếp theo của chúng tôi, chúng tôi sẽ thay thế nút bằng nội dung mới sau khi nó được nhấp vào. Điều này sẽ bắt chước trải nghiệm người dùng được kiểm soát nhiều hơn.
<div> <button class="btn"> Click me! </button> </div>
Ở đây, chúng tôi đã bọc nút của mình trong một
html() và thay thế nút bằng thẻ
chứa văn bản. Đôi khi chúng tôi chỉ muốn người dùng nhấp vào nút một lần và được chuyển hướng đến nội dung mới!
$('.btn').on('click', function() {
$('div').html('<p>The button has been replaced</p>')
})
Theo cách tương tự như ví dụ trước của chúng tôi, chúng tôi đang chọn nút và sử dụng on() để đính kèm một trình xử lý nhấp chuột. Bên trong chức năng gọi lại của chúng tôi, chúng tôi đang thay thế HTML nút bằng một phần tử đoạn có chứa nội dung HTML mới.
Khi nút được nhấp:
Chúng tôi có nội dung mới và không có nút nào! Đây là một cách mạnh mẽ để hướng dẫn trải nghiệm người dùng theo cách có kiểm soát hơn.
Kết luận
Chúng ta đã thấy cách jQuery on() có thể đính kèm một trình xử lý sự kiện vào một phần tử trong một vài dòng mã mạnh mẽ. Sau khi học cú pháp cơ bản, chúng tôi đã xem xét hai ví dụ về cách jQuery on() có thể được sử dụng. Nó đủ linh hoạt để được sử dụng theo một cách cụ thể hoặc một cách tổng quát hơn tùy thuộc vào kết quả mong muốn.
Như hướng dẫn này là phần giới thiệu về cách sử dụng jQuery on() , hãy đảm bảo dành thời gian luyện tập. Có rất nhiều công dụng đang chờ được khám phá khi bạn tiến tới thành thạo xử lý sự kiện!