jQuery bài 4 sự kiện trong jQuery

jQuery cung cấp cho chúng ta khá nhiều các sự kiện đủ để thao tác với các thành phần trên website mà chúng ta mong muốn. Bên cạnh đó, jQuery còn loại bỏ hoàn toàn các event code ra khỏi mã HTML như cách viết javascript thông thường

Trong javascript, để xuất hiện thông báo với người dùng khi click vào liên kết bạn phải viết như sau: 

CODE


<a class="click" href="#" onclick="arlert('Welcome to MienDatWeb.Com')">Click to show message</a>

Bạn nhận thấy rằng chúng ta phải viết mã để gọi sự kiện onclick ngay trong liên kết <a>. Nhưng với jQuery thì chúng ta có thể sử dụng bộ selector để thao tác với các sự kiện như sau: 

CODE


$("a.click").click(function() { alert("Welcome to MienDatWeb.Com"); });

Bộ quản lý sự kiện 

Javascript cung cấp Bộ quản lý sự kiện window.onload cho phép chúng ta thực thi một hàm nào đó. Trong khi đó jQuery cung cấp cho chúng ta bộ quả lý sự kiện $(document).ready() nhưng với những ưu điểm vượt trội hơn sự kiện window.onload 

window.onload sẽ được thực thi sau khi trình duyệt tải xong toàn bộ tài liệu cần thiết bao gồm stylesheet, hình ảnh… 

Trong khi đó  $(document).ready() sẽ được thực thi ngay khi các phần tử DOM được sẵn sàng mà không cần đợi các tài liệu như stylesheet hay hình ảnh tải xong. Do đó quá trình xử lý vào thao tác sẽ diễn ra nhanh hơn. 

Cách đăng ký bộ quản lý sự kiện trong jQuery 

CODE


$(document).ready(function() {
    //Code và các chương trình thực thi
})
Hoặc:

$().ready(function() {
//Code và các chương trình thực thi
})

Hoặc:

$(function() {
//Code và các chương trình thực thi
})

Một số sự kiện thường sử dụng trong jQuery 

1. Các sự kiện đối với trình duyệt 

error() : Xảy ra khi trình duyệt gặp lỗi trong quá trình tải tài liệu, ví dụ liên kết đến hình ảnh bị gãy,... 
resize() : khi người dùng thay đổi kích thước cửa sổ trình duyệt 
scroll(): Xử lý tác tác vụ khi người dùng cuộn trang 
2. Các sự kiện với Form 

focus() : khi con trỏ chuột đang tác động tại phần tử Form 
blur() Thực hiện khi click chuột ra ngoài phần tử form 
change() khi giá trị của phần tử form được thay đổi 
select() khi phần tử form được chọn 
submit() Khi form được submit 

3. Sự kiện với bàn phím 

focusin() : tương tự focus() 
focusout() tương tự blur() 
keyup(), keydown(), keypress(): Xảy ra khi đang nhập liệu vào Form 

4. Sự kiện đối với chuột 

click(): Khi người dùng click chuột 
hover(): di chuyển chuột lên đối tượng 
toggle() :  Thực hiện theo các lần click chuột của người dùng, ví dụ thay đổi giữa trạng thái ẩn hiện của phần tử 

Trên đây là một số sự kiện thường được sử dụng với jQuery, ngoài ra jQuery còn cung cấp các tác vụ để thực hiện các sự kiện như blind(), die()… 

Bạn có thể tìm hiểu thêm về jQuery event tại đây:  http://api.jquery.com/category/events/