Xử lý sự kiện trong jQuery
Tất cả chúng ta có khả năng tạo các website động bởi sử dụng các Sự kiện (Sự kiện). Các sự kiện là các hành động mà có thể được phát hiện bởi vận dụng website của các bạn.
Sau đây chẳng hạn một số sự kiện:
- nhấn chuột
- Tải website
- Di chuyển chuột qua một phần tử
- Đệ trình một HTML Form
- Thao tác nhấn phím trên keyboard
- etc.
Khi các sự kiện này được kích hoạt, bạn có thể sử dụng các hàm custom để comment bất kỳ những gì bạn mong muốn với sự kiện đó. Những hàm custom này gọi là Sự kiện Handler.
Bind các Sự kiện Handler trong jQuery
Sử dụng Sự kiện Model trong jQuery, tất cả chúng ta có thể cài đặt các Sự kiện Handler trên các phần tử DOM với phương pháp bind() như sau:
<htmlvàgt; <headvàgt; <titlevàgt;The jQuery Examplevàlt;/titlevàgt; <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $('div').bind('click', function( sự kiện ){ alert('Hi there!'); }); }); </scriptvàgt; <stylevàgt; .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </stylevàgt; </headvàgt; <bodyvàgt; <ρvàgt;Click on any square below to see the result:</ρvàgt; <div class="div" style="background-color:blue;">ONEvàlt;/divvàgt; <div class="div" style="background-color:green;">TWOvàlt;/divvàgt; <div class="div" style="background-color:red;">THREEvàlt;/divvàgt; </bodyvàgt; </htmlvàgt;
Tiếp thị
Code trên sẽ khiến cho phần tử div comment lại sự kiện click; khi người tiêu dùng bấm chuột bên trong phần tử div này, ngay sau đó, cảnh báo sẽ được hiển thị.
Nó sẽ cho kết quả sau:
Cú pháp đầy đủ của lệnh bind() trong jQuery như sau:
.bind( eventType[, eventData], handler)
Kế tiếp, chúng tôi diễn đạt cụ thể các tham số:
-
eventType − Một chuỗi chứa một loại JavaScript sự kiện, như click hoặc đệ trình. Bạn theo dõi phần dưới để thấy danh mục đầy đủ các loại sự kiện.
-
eventData − tham số tùy ý là một map của dữ liệu mà sẽ được truyền tới Sự kiện Handler.
-
handler − Một hàm để thực thi mỗi khi sự kiện được kích hoạt.
Gỡ bỏ Sự kiện Handler trong jQuery
Một nét đặc thù là, mỗi khi một Sự kiện Handler được thành lập, nó vẫn còn hiệu quả trong phần sống sót lại của website. Có một sự thiết yếu khi bạn mong muốn gỡ bỏ Sự kiện Handler này.
jQuery phân phối lệnh unbind() để gỡ bỏ một Sự kiện Handler đang tồn tại. Cú pháp của unbind() trong jQuery như sau:
.unbind(eventType, handler) or .unbind(eventType)
Cụ thể về tham số:
-
eventType − Một chuỗi chứa một loại JavaScript Sự kiện, như click hoặc đệ trình. Bạn theo dõi phần dưới để thấy danh mục đầy đủ các loại sự kiện.
-
handler − Nếu được phân phối, nó nhận diện Sự kiện Handler rõ ràng và cụ thể cần gỡ bỏ.
Các loại sự kiện trong jQuery
Bạn có thể connect (bind) các sự kiện sau bởi sử dụng jQuery:
STT
Loại Sự kiện & Diễn tả
1
blur
Hiện ra khi phần tử mất trung tâm
2
change
Hiện ra khi phần tử biến đổi
3
click
Hiện ra khi bấm chuột
4
dblclick
Kích hoạt khi nhấp đúp chuột
5
error
Hiện ra khi có một lỗi trong tiến trình tải
6
focus
Hiện ra khi phần tử nhận trung tâm
7
keydown
Hiện ra khi phím được nhấn
8
keypress
Kích hoạt khi phím được nhấn & thả ra
9
keyup
Kích hoạt khi phím được thả ra
10
load
Hiện ra khi ebook được tải
11
mousedown
Hiện ra khi nút chuột được nhấn
12
mouseenter
Hiện ra khi chuột di chuyển vào trong khu vực một phần tử
13
mouseleave
Hiện ra khi chuột di chuyển ra khỏi khu vực một phần tử
14
mousemove
Kích hoạt khi con trỏ chuột di chuyển
15
mouseout
Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử
16
mouseover
Kích hoạt khi con trỏ chuột di chuyển qua một phần tử
17
mouseup
Hiện ra khi một nút chuột được nhả ra
18
resize
Kích hoạt khi kích thước cửa sổ biến đổi
19
scroll
Kích hoạt khi cửa sổ được cuốn
20
select
Kích hoạt khi một text được chọn
21
submit
Kích hoạt khi một form được đệ trình
22
unload
Kích hoạt khi ebook không được tải
Tiếp thị
Đối tượng Sự kiện trong jQuery
Hàm callback nhận một tham số đơn; khi một Handler được gọi, đối tượng JavaScript Sự kiện sẽ được truyền qua nó.
Đối tượng Sự kiện thường không thiết yếu & tham số được bỏ qua, khi context là thường có sẵn khi Handler được connect để biết chuẩn xác những gì cần được thực hiện khi Handler được kích hoạt; không những thế có một số tính chất nào này mà bạn cần truy xuất.
Các tính chất của đối tượng Sự kiện trong jQuery
Các tính chất của Sự kiện là có sẵn & an toàn để truy cập theo một phương pháp độc lập:
STT
Tính chất & Diễn tả
1
altKey
Seting là true nếu phím Alt được nhấn khi sự kiện được kích hoạt, còn nếu như không là false. Phím Alt được gán nhãn là Option trên đa số keyboard Mac
2
ctrlKey
Seting là true nếu phím Ctrl được nhấn khi sự kiện được kích hoạt, còn nếu như không là false
3
data
Giá trị, nếu bất kỳ, được truyền như là tham số thứ hai tới lệnh bind() khi Handler được thành lập.
4
keyCode
Cho sự kiện các phím di chuyển lên, xuống, điều này trả về phím mà được nhấn
5
metaKey
Seting là true nếu phím Meta được nhấn khi sự kiện được kích hoạt, còn nếu như không là false. Phím Meta là phím Ctrl trên các máy tính & phím Command trên Macs
6
pageX
Cho các sự kiện liên quan tới chuột, xác nhận tọa độ ngang của sự kiện trong mỗi quan hệ với trang ban đầu.
7
pageY
Cho các sự kiện liên quan tới chuột, xác nhận tọa độ dọc của sự kiện trong mỗi quan hệ với trang ban đầu
8
relatedTarget
Với một số sự kiện liên quan đến chuột, nhận diện phần tử mà con trỏ chuột rời khỏi hoặc đi vào khi sự kiện được kích hoạt.
9
screenX
Với một số sự kiện liên quan đến chuột, xác nhận tọa độ ngang của sự kiện trong mối quan hệ với màn hình ban đầu
10
screenY
Với một số sự kiện liên quan đến chuột, xác nhận tọa độ dọc của sự kiện trong mối quan hệ với màn hình ban đầu
11
shiftKey
Seting là true nếu phím Shift được nhấn khi sự kiện được kích hoạt, còn nếu như không là false
12
target
Nhận diện phần tử mà với nó sự kiện được kích hoạt
13
timeStamp
timestamp (giá trị mili giây) khi sự kiện được tạo thành
14
type
Với toàn bộ sự kiện, xác nhận loại sự kiện mà được kích hoạt
15
which
Với các sự kiện liên quan tới keyboard, xác nhận code giá trị số cho phím mà gây ra sự kiện, & với các sự kiện liên quan tới chuột, xác nhận nút nào được nhấn (1 cho nút trái, 2 cho ở giữa & 3 cho nút phải)
Chẳng hạn
<htmlvàgt; <headvàgt; <titlevàgt;The jQuery Examplevàlt;/titlevàgt; <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $('div').bind('click', function( sự kiện ){ alert('Sự kiện type is ' + sự kiện.type); alert('pageX : ' + sự kiện.pageX); alert('pageY : ' + sự kiện.pageY); alert('Target : ' + sự kiện.target.innerHTML); }); }); </scriptvàgt; <stylevàgt; .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </stylevàgt; </headvàgt; <bodyvàgt; <ρvàgt;Click on any square below to see the result:</ρvàgt; <div class="div" style="background-color:blue;">ONEvàlt;/divvàgt; <div class="div" style="background-color:green;">TWOvàlt;/divvàgt; <div class="div" style="background-color:red;">THREEvàlt;/divvàgt; </bodyvàgt; </htmlvàgt;
Nó sẽ cho kết quả sau:
Các phương pháp của đối tượng Sự kiện trong jQuery
Dưới đây liệt kê các phương pháp mà có thể được gọi trên một đối tượng Sự kiện trong jQuery:
STT
Công thức & Diễn tả
1
preventDefault()
Ngăn cản trình duyệt thực thi hành động mặc định
2
isDefaultPrevented()
Trả về có hay không phương pháp sự kiện.preventDefault() đã từng được gọi trên đối tượng Sự kiện này
3
stopPropagation()
Dừng bubble một sự kiện tới các phần tử cha, ngăn cản bất kể phần tử cha nào được cảnh báo về sự kiện này
4
isPropagationStopped()
Trả về có hay không sự kiện.stopPropagation() đã từng gọi trên đối tượng Sự kiện này
5
stopImmediatePropagation()
Dừng phần sót lại của các Handler từ việc được thực thi
6
isImmediatePropagationStopped()
Trả về có hay không sự kiện.stopImmediatePropagation() đã từng được gọi trên đối tượng Sự kiện này
Các phương pháp thao tác đối tượng Sự kiện trong jQuery
Bảng dưới liệt kê các phương pháp trọng yếu liên quan tới Sự kiện trong jQuery:
Các phương pháp Sự kiện Helper trong jQuery
jQuery cũng phân phối một tập hợp các hàm Sự kiện Helper mà có thể được sử dụng hoặc để kích hoạt một sự kiện hoặc để bind bất kỳ loại sự kiện nào được đề cập ở phần trên.
Các phương pháp Trigger trong jQuery
Dưới đây là chẳng hạn sẽ kích hoạt sự kiện blur trên toàn bộ đoạn văn:
$("p").blur();
Công thức Binding trong jQuery
Chẳng hạn sau sẽ bind một sự kiện click trên toàn bộ phần tử <divvàgt;:
$("div").click( function () { // do something here });
Bảng dưới liệt kê đầy đủ toàn bộ phương pháp được trợ giúp bởi jQuery:
STT
Công thức & Diễn tả
1
blur( )
Kích hoạt sự kiện blur của mỗi phần tử đã so khớp
2
blur( fn )
Bind một hàm tới sự kiện blur của mỗi phần tử đã so khớp
3
change( )
Kích hoạt sự kiện change của mỗi phần tử đã so khớp
4
change( fn )
Bind một hàm tới sự kiện change của mỗi phần tử đã so khớp
5
click( )
Kích hoạt sự kiện click của mỗi phần tử đã so khớp
6
click( fn )
Bind một hàm tới sự kiện click của mỗi phần tử đã so khớp
7
dblclick( )
Kích hoạt sự kiện dblclick của mỗi phần tử đã so khớp
8
dblclick( fn )
Bind một hàm tới sự kiện dblclick của mỗi phần tử đã so khớp
9
error( )
Kích hoạt sự kiện error của mỗi phần tử đã so khớp
10
error( fn )
Bind một hàm tới sự kiện error của mỗi phần tử đã so khớp
11
focus( )
Kích hoạt sự kiện focus của mỗi phần tử đã so khớp
12
focus( fn )
Bind một hàm tới sự kiện focus của mỗi phần tử đã so khớp
13
keydown( )
Kích hoạt sự kiện keydown của mỗi phần tử đã so khớp
14
keydown( fn )
Bind một hàm tới sự kiện keydown của mỗi phần tử đã so khớp
15
keypress( )
Kích hoạt sự kiện keypress của mỗi phần tử đã so khớp
16
keypress( fn )
Bind một hàm tới sự kiện keypress của mỗi phần tử đã so khớp
17
keyup( )
Kích hoạt sự kiện keyup của mỗi phần tử đã so khớp
18
keyup( fn )
Bind một hàm tới sự kiện keyup của mỗi phần tử đã so khớp
20
load( fn )
Bind một hàm tới sự kiện load của mỗi phần tử đã so khớp
21
mousedown( fn )
Bind một hàm tới sự kiện mousedown của mỗi phần tử đã so khớp
22
mouseenter( fn )
Bind một hàm tới sự kiện mouseenter của mỗi phần tử đã so khớp
23
mouseleave( fn )
Bind một hàm tới sự kiện mouseleave của mỗi phần tử đã so khớp
24
mousemove( fn )
Bind một hàm tới sự kiện mouseover của mỗi phần tử đã so khớp
25
mouseout( fn )
Bind một hàm tới sự kiện mouseout của mỗi phần tử đã so khớp
26
mouseover( fn )
Bind một hàm tới sự kiện mouseover của mỗi phần tử đã so khớp
27
mouseup( fn )
Bind một hàm tới sự kiện mouseup của mỗi phần tử đã so khớp
28
resize( fn )
Bind một hàm tới sự kiện resize của mỗi phần tử đã so khớp
29
scroll( fn )
Bind một hàm tới sự kiện scroll của mỗi phần tử đã so khớp
30
select( )
Kích hoạt sự kiện select của mỗi phần tử đã so khớp
31
select( fn )
Bind một hàm tới sự kiện select của mỗi phần tử đã so khớp
32
submit( )
Kích hoạt sự kiện submit của mỗi phần tử đã so khớp
33
submit( fn )
Bind một hàm tới sự kiện submit của mỗi phần tử đã so khớp
34
unload( fn )
Bind một hàm tới sự kiện unload của mỗi phần tử đã so khớp
Đã có app VietJack trên smartphone, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng….Free. Tải ngay vận dụng trên Android & iOS.
Các bạn có thể mua thêm khóa học JAVA CORE ONLINE VÀ ỨNG DỤNG cực hay, giúp các bạn vượt mặt các dự án trên trường & đi thực tập Java. Khóa học có giá chỉ 300K, nhằm ưu đãi, tạo điều kiện cho sinh viên cho thể mua khóa học.
Bài viết khóa học gồm 16 chuơng & 100 video cực hay, học trực tiếp tại https://www.udemy.com/tu-tin-di-lam-voi-kien-thuc-ve-java-core-toan-tap/
Bạn nào có nhu cầu mua, tin nhắn trực tiếp α Tuyền, cựu sinh viên Bách Khoa K53, fb: https://www.facebook.com/tuyen.vietjack
Follow facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài tiên tiến nhất về Java,₵,₵++,Javascript,HTML,Python,Database,Mobile…. tiên tiến nhất của chúng tôi.
Các bài học jQuery khác tại VietJack: