JS - Sự kiện - Event trong jQuery

30/04/2019, 5:28 PM | 30/04/2019, 5:28 PM | 683 | 046

Sự kiện trong jQuery về cơ bản giống với sự kiện trong Javascript nhưng có nhiều phương thức hơn. Vì thế nếu bạn đã học qua về Javascript rồi thì sẽ thấy các sử dụng event trong jQuery cũng khá đơn giản. Sau đây là tổng hợp các sự kiện trong jQuery được chia thành từng nhóm giống Selector giúp dễ nhớ hơn.
1. Nhóm Browser Events trong jQuery

Tên	Ý nghĩa
error()	Xảy ra khi xuất hiện lỗi
resize()	Xảy ra khi thay đổi kích thước browser
scroll()	Xảy ra khi di chuyển thanh cuộn

2. Nhóm Document Loading trong jQuery

Tên	Ý nghĩa
holdReady()	Chì hõan sự kiện ready. Khi đặt $.holdReady(true) sự kiện ready sẽ không được kích hoạt cho đến khi đặt lại $.holdReady(false). Phương thức này được thêm vào từ phiên bản 1.6 của jQuery.
ready()	Xảy ra khi trình duyệt đã load xong
load()	Xảy ra khi đối tượng đã được tải xong
unload()	Xảy ra khi đóng trình duyệt, một liên kết để rời khỏi trang được kích hoạt hoặc reload lại trang. Mỗi trình duyệt sẽ hỗ trợ unload() khác nhau hoặc không hỗ trợ. unload() không được dùng trong phiên bản 1.8 và bị xóa trong phiên bản 3.0

3. Nhóm Event Handler Attachment

Tên	Ý nghĩa
bind()	Bổ sung sự kiện vào đối tượng. bind() không được dùng từ phiên bản 3.0 thay thể bằng on()
delegate()	Bổ sung sự kiện vào đối tượng đã có hoặc sẽ thêm mới bằng Javascript ( tức là các đối tượng được thêm mới cũng sẽ có sự kiện được bổ sung bới delegate ) Từ phiên bản 3.0 delegate() không được dùng nữa thay thế bởi on()
die()	Xóa sự kiện được thêm vào phần tử mà trước đó được thêm bởi live(). Từ phiên bản 1.7 thì live() không được sử dụng nữa nên die() cũng không nên sử dụng.
live()	Bổ sung sự kiện vào đối tượng đã có hoặc sẽ thêm mới bằng Javascipt (tương tự delegate ) Từ phiên bản 1.7 thì live() không được sử dụng nữa thay thế bằng on()
off()	Xóa sự kiện được thêm vào phần tử mà trước đó được thêm bởi on(). Được sử dụng từ phiên bản 1.7
on()	Bổ sung sự kiện vào đối tượng. Được thêm vào từ phiên bản 1.7 thay thế cho live() bind() và delegate()
one()	Giống với on() tuy nhiên sự kiện thêm vào chỉ sảy ra với một phần tử và đúng một lần.
trigger()	Kích hoạt một sự kiện nào đó
triggerHandler ()	Giống với trigger() nhưng khác ở chỗ : - trigger() sẽ kích hoạt trên tất cả các đối tượng trả về phù hợp còn triggerHandler() chỉ kích hoạt trên phần tử đầu tiên. - triggerHandler() sẽ không gọi event() trên phần tử được kích hoạt. Sẽ không gọi sự kiện submit trên một form.
unbind()	Xóa bỏ sự kiện được thêm vào thành phần trước đó. Từ phiên bản 3.0 unbind() không được dùng nữa thay thế bởi off()
undelegate()	Xóa bỏ sự kiện được thêm vào thành phần trước đó. Từ phiên bản 3.0 unbind() không được dùng nữa thay thế bởi off()

4. Nhóm Form Events

Tên	Ý nghĩa
blur()	Xảy ra khi thoát khỏi focus của đối tượng nào đó
change()	Xảy ra khi giá trị phần tử bị thay đổi
focus()	Xảy ra khi con trỏ chuột đang ở trong đối tượng
focusin()	Xảy ra khi một phần tử hay bất kì phần tử nào bên trong nó được focus.Khác với focus() là có thể phát hiện đối tượng đang được focus bằng phần tử cha của nó.
focusout()	Xảy ra khi một phần tử hay bất kì phần tử nào bên trong nó không được focus nữa. Khác với blur() là có thể phát hiện đối tượng không được focus nữa bằng phần tử cha của nó.
select()	Xảy ra khi người dùng lựa chọn vùng văn bản bên trong phần tử hay là bôi đen văn bản trong phần tử đó. Sự kiện này chỉ giới hạn trong thẻ <input type="text"> và <textarea>
submit()	Xảy ra khi form được submit

5. Nhóm Keyboard Events

Tên	Ý nghĩa
keydown()	Xảy ra khi một phím được nhấn xuống, tác dụng với tất cả phím, kể cả phím ảo
keypress()	Xảy ra khi một phím được nhấn xuống trừ một số phím như Shift, Esc, Ctrl, Delete, các phím mũi tên
keyup()	Xảy ra khi một phím được nhả ra

6. Nhóm Mouse Events

Tên	Ý nghĩa
click()	Xảy ra khi click chuột vào đối tượng
contextmenu()	Xảy ra khi click phải chuột vào đối tượng
dbcclick()	Xảy ra khi nhấn đúp chuột vào đối tượng
hover()	Dùng để sử lý một hoặc hai sự kiện : khi di chuyển chuột vào đối tượng ( mouseenter ) và khi di chuyển chuột ra khỏi đối tượng ( mouseleave )
mousedown()	Xảy ra khi một nút chuột được nhấn
mouseup()	Xảy ra khi một nút chuột được nhả ra
mouseenter()	Xảy ra khi di chuyển chuột vào đối tượng
mouseleave()	Xảy ra khi di chuyển chuột ra khỏi đối tượng
mousemove()	Xảy ra khi con trỏ chuột di chuyển bên trong thẻ
mouseover()	Xảy ra khi di chuyển chuột vào đối tượng. Khác mouseenter() ở chỗ mouseover() kích hoạt cả khi ta di chuyển vào phần tử con của nó, trong khi mouseenter() chỉ kích hoạt trên đối tượng được chỉ định.
mouseout()	Xảy ra khi di chuyển chuột ra khỏi đối tượng. Khác mouseleave() ở chỗ mouseout() kích hoạt cả khi ta di chuyển ra khỏi phần tử con của nó, trong khi mouseleave() chỉ kích hoạt trên đối tượng được chỉ định.
toggle()	Dùng để chuyển đổi luân phiên giữa việc ẩn và hiện của đối tượng. Đối tượng đang ẩn sẽ được hiện lên và ngược lại. Không được dùng trong phiên bản 1.8 và bị loại bỏ trong phiên bản 1.9