Các sự kiện sinh ra để phản ứng lại với tương tác của người dùng với trang web. Chúng ta đã khá quen thuộc với các sự kiện như onclick, onmousedown, onkeydown,…… trong javascript. Jquery tất nhiên cung cấp đầy đủ những sự kiện trong javascript. Không chỉ vậy, với cú pháp xử lý đơn giản, dễ hiểu nó còn làm được nhiều hơn thế.
$(document).ready()
Đây là bộ quản lý sự kiện cơ bản của Jquery. Hiểu đơn giản thì nó cũng là một sự kiện trong jquery, được kích hoạt khi tài liệu html của trang web được load xong và cây DOM được tạo thành.
Ngoài ra, Jquery còn có một bộ quản lý sự kiện khác đó là $(window).load(). Cái này hoàn toàn giống với
window.onload() trong javascript. Window.onload() chỉ được kích hoạt khi toàn bộ tài liệu đã được load xong, bào gồm ảnh, css, object, các frame…. Rõ ràng $(document).ready() có ưu điểm rõ rệt hơn 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
Hàm
window.onload() là hợp lý.Hàm
$(document).ready() có thể được gọi nhiều lần, ngoài cách viết này chúng ta có thể viết$().ready(function(){……….}) hoặc $(function(){……..}) đều được.Ví dụ minh họa
Hãy bắt đầu bằng một sự kiện đơn giản, đó là click:
Code html:
01
| <button id="”target”">click here</button> |
Code Jquery:
01
02
03
04
05
| $(document).ready( function () { $('#target').click(function( e ){ $(“body”).append(“bạn đã click”); });}); |
Code trên sẽ hoạt động như sau: khi bạn
Bạn có thể xem kết quả ở đây: http://jsfiddle.net/Nbp4v/
click vào button có id là target thì một đoạn text sẽ được thêm vào cuối thẻ <body>. Hàm function() bên trong chính là eventHandler, có nhiệm vụ xử lý sự kiện click của chúng ta.Bạn có thể xem kết quả ở đây: http://jsfiddle.net/Nbp4v/
EmoticonEmoticon