Xử lý sự kiện trong jQuery

Bởi

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

Xem Thêm  'Khoảng cách' trong HTML là gì? - thẻ span là gì

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

Xem Thêm  JavaScript If-Else và If-Then - Câu lệnh điều kiện JS - câu lệnh else if javascript

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

Xem Thêm  11 phương pháp dễ dàng về cách phác thảo trên vải trước khi sơn acrylic - cách vẽ trên canvas

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:

Viết một bình luận