Phân biệt window.onload và $("document").ready()

jQuery có 2 bộ quản lý sự kiện cơ bản là window.load và document.ready. Vậy khi nào thì sử dụng chúng? dưới đây mình sẽ chỉ ra sự khác biệt giữa 2 hàm quản lý sự kiện này để chúng ta dùng đúng cách hơn. Các bạn cùng theo dõi nhé.

Phân biệt window.onload và $("document").ready()

Window.onload()

Khi sử dụng Window.onload() có ý nghĩa rằng khi trình duyệt đã load xong mọi thứ (image, js, css) thì những đoạn code nằm bên trong đó mới được chạy. Có một lưu ý rằng nếu bạn sử dụng onload cho một thẻ HTML nào đó thì nó sẽ có tác dụng với thẻ HTML đó thôi nhưng nếu bạn dùng cho window thì nó sẽ có tác dụng cho toàn trang.

Hay nói cách khác những đoạn code nằm bên trong sự kiện onload sẽ được chạy sau cùng khi mà trình JS đã được biên dịch 1 lần. Chính vì vậy nếu trong sự kiện onload bạn gọi tới một hàm nào đó thì dù bạn đặt hàm đó phía trên hay phía dưới thì đều đúng

$(document).ready()

Cũng giống với sự kiện Window.onload() nếu bạn muốn một sự kiện jQuery nào đó hoạt động bạn phải gọi nó bên trong hàm $(document).ready(). Nhưng mọi thứ bên trong hàm này sẽ được load ngay khi DOM Tree được load và trước khi toàn bộ nội dung của trang được load.

Kết Luận

$(document).ready() có ưu điểm rõ rệt hơn onload khi thời điểm kích hoạt sự kiện là sớm hơn, đặc biệt khi trang web có dung lượng lớn, chứa nhiều hình ảnh. Tuy nhiên nếu bạn cần thao tác javascript với các hình ảnh thì sử dụng window.onload() là hợp lý. Vậy nên tùy mục đích sử dụng các bạn có thể áp dụng kiến thức này vào việc lập trình với javascript.