Review: DOM events in jQuery

E-mail

Thêm người nghe sự kiện

Bạn có thể thêm một trình lắng nghe sự kiện bằng cách sử dụng on():

    $("#save-button").on("click", function() {
       // handle click event
    });

Nếu bạn cần truy cập chi tiết về sự kiện, bạn có thể tìm thấy chúng trong đối tượng sự kiện jQuery được truyền vào hàm gọi lại:

    $("#face-pic").on("click", function(event) {
       var mouseX = event.pageX;
       var mouseY = event.pageY;
    });

Kích hoạt sự kiện

Bạn có thể kích hoạt thủ công một sự kiện trên một đối tượng từ JavaScript của mình bằng trình kích hoạt:
$("#save-button").trigger("click");

Điều đó có thể hữu ích khi kiểm tra chức năng mới hoặc khi bạn muốn một số mã chạy cả khi trang tải và sau một số sự kiện cụ thể.

Kiểm tra sẵn sàng DOM

Nếu bạn muốn chắc chắn rằng trình duyệt không chạy mã JS của bạn cho đến khi DOM được tải đầy đủ và sẵn sàng, thì bạn có thể chuyển mã của mình tới ready():

    $(document).ready(function() {
      $("h1").text("Y'all ready for this?");
    });

Một phiên bản ngắn hơn đó là chuyển mã của bạn đến hàm jQuery:

    $(function() {
      $("h1").text("Y'all ready for this?");
    });

Tuy nhiên, mã đó không thể đọc được như phiên bản dài hơn, vì vậy chúng tôi khuyên bạn nên sử dụng ready()chức năng này.

Lưu ý rằng nếu bạn bao gồm JS của bạn trong một <script>thẻ ở cuối trang, thì DOM của bạn sẽ hoàn toàn sẵn sàng vào thời điểm trình duyệt chạy JS của bạn. Tuy nhiên, nếu bạn muốn chắc chắn gấp đôi, thì bạn có thể chọn luôn kiểm tra mức độ sẵn sàng của DOM.

Thêm kỹ thuật sự kiện

Để có bản tóm tắt dài hơn và đi sâu hơn vào các sự kiện jQuery, hãy đọc Khái niệm cơ bản về sự kiện jQuery trong tài liệu của họ.