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:

<a class="click" href="#" onclick="arlert('Welcome to Ewebvn.Com')">Click me</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:

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

Demo và thực hành

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

$(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/

Tagged as: jQuery, su kien trong jquery

Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

• Làm việc với CSS trong jQuery
• Sửa đổi cấu trúc HTML trong jQuery (Phần cuối)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 3)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 2)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 1)