Xử lý sự kiện trong jQuery

Chúng ta có khả năng tạo các trang web động bởi sử dụng các Sự kiện (Event). Các sự kiện là các hành động mà có thể được phát hiện bởi ứng dụng web của bạn.

Sau đây ví dụ một số sự kiện:

  • Nhấp chuột
  • Tải trang web
  • 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 bàn phím
  • ...

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 để phản hồi bất kỳ những gì bạn muốn với sự kiện đó. Những hàm custom này gọi là Event Handler.

Bind các Event Handler trong jQuery

Sử dụng Event Model trong jQuery, chúng ta có thể thiết lập các Event Handler trên các phần tử DOM với phương thức bind() như sau:

<html> 
  <head> 
     <title>The jQuery Example</title> 
     <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(event){ 
             alert('Hi there!'); 
          }); 
        }); 
     </script> 
     <style> 
        .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} 
     </style> 
  </head> 
  <body> 
     <p>Click on any square below to see the result:</p> 
     <div class="div" style="background-color:blue;">ONE</div> 
     <div class="div" style="background-color:green;">TWO</div> 
     <div class="div" style="background-color:red;">THREE</div> 
  </body> 
</html>

Code trên sẽ làm cho phần tử div phản hồi lại sự kiện click; khi người sử dụng nhấp chuột bên trong phần tử div này, ngay sau đó, thông báo sẽ được hiển thị.

Cú pháp đầy đủ của lệnh bind() trong jQuery như sau:

selector.bind(eventType[, eventData], handler)

Tiếp theo, chúng tôi diễn tả chi tiết các tham số:

  • eventType − Một chuỗi chứa một loại JavaScript event, như click hoặc đệ trình. Bạn theo dõi phần dưới để thấy danh sách đầ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 Event Handler.
  • handler − Một hàm để thực thi mỗi khi sự kiện được kích hoạt.

Gỡ bỏ Event Handler trong jQuery

Một nét đặc trưng là, mỗi khi một Event Handler được thành lập, nó vẫn còn hiệu quả trong phần sống còn lại của trang web. Có một sự cần thiết khi bạn muốn gỡ bỏ Event Handler này.

jQuery cung cấp lệnh unbind() để gỡ bỏ một Event Handler đang tồn tại. Cú pháp của unbind() trong jQuery như sau:

selector.unbind(eventType, handler) 
or 
selector.unbind(eventType)

Chi tiết về tham số:

  • eventType − Một chuỗi chứa một loại JavaScript Event, như click hoặc đệ trình. Bạn theo dõi phần dưới để thấy danh sách đầy đủ các loại sự kiện.
  • handler − Nếu được cung cấp, nó nhận diện Event Handler cụ thể cần gỡ bỏ.

Các loại sự kiện trong jQuery

Bạn có thể kết nối (bind) các sự kiện sau bởi sử dụng jQuery:

STTLoại Event & Miêu tả
1blur

Xuất hiện khi phần tử mất trọng tâm

2change

Xuất hiện khi phần tử thay đổi

3click

Xuất hiện khi click chuột

4dblclick

Kích hoạt khi nhấp đúp chuột

5error

Xuất hiện khi có một lỗi trong quá trình tải

6focus

Xuất hiện khi phần tử nhận trọng tâm

7keydown

Xuất hiện khi phím được nhấn

8keypress

Kích hoạt khi phím được nhấn và thả ra

9keyup

Kích hoạt khi phím được thả ra

10load

Xuất hiện khi tài liệu được tải

11mousedown

Xuất hiện khi nút chuột được nhấn

12mouseenter

Xuất hiện khi chuột di chuyển vào trong khu vực một phần tử

13mouseleave

Xuất hiện khi chuột di chuyển ra khỏi khu vực một phần tử

14mousemove

Kích hoạt khi con trỏ chuột di chuyển

15mouseout

Kích hoạt khi con trỏ chuột di chuyển ra khỏi một phần tử

16mouseover

Kích hoạt khi con trỏ chuột di chuyển qua một phần tử

17mouseup

Xuất hiện khi một nút chuột được nhả ra

18resize

Kích hoạt khi kích cỡ cửa sổ thay đổi

19scroll

Kích hoạt khi cửa sổ được cuốn

20select

Kích hoạt khi một text được chọn

21submit

Kích hoạt khi một form được đệ trình

22unload

Kích hoạt khi tài liệu không được tải

Đối tượng Event trong jQuery

Hàm callback nhận một tham số đơn; khi một Handler được gọi, đối tượng JavaScript Event sẽ được truyền qua nó.

Đối tượng Event thường không cần thiết và tham số được bỏ qua, khi context là thường có sẵn khi Handler được kết nối để biết chính xác những gì cần được thực hiện khi Handler được kích hoạt; tuy nhiên có một số thuộc tính nào đó mà bạn cần truy xuất.

Các thuộc tính của đối tượng Event trong jQuery

Các thuộc tính của Event là có sẵn và an toàn để truy cập theo một phương thức độc lập:

STTThuộc tính & Miêu tả
1altKey

Thiết lập là true nếu phím Alt được nhấn khi sự kiện được kích hoạt, nếu không là false. Phím Alt được gán nhãn là Option trên hầu hết bàn phím Mac

2ctrlKey

Thiết lập là true nếu phím Ctrl được nhấn khi sự kiện được kích hoạt, nếu không là false

3data

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.

4keyCode

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

5metaKey

Thiết lập là true nếu phím Meta được nhấn khi sự kiện được kích hoạt, nếu không là false. Phím Meta là phím Ctrl trên các PC và phím Command trên Macs

6pageX

Cho các sự kiện liên quan tới chuột, xác định tọa độ ngang của sự kiện trong mỗi quan hệ với trang ban đầu.

7pageY

Cho các sự kiện liên quan tới chuột, xác định tọa độ dọc của sự kiện trong mỗi quan hệ với trang ban đầu

8relatedTarget

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.

9screenX

Với một số sự kiện liên quan đến chuột, xác định tọa độ ngang của sự kiện trong mối quan hệ với màn hình ban đầu

10screenY

Với một số sự kiện liên quan đến chuột, xác định tọa độ dọc của sự kiện trong mối quan hệ với màn hình ban đầu

11shiftKey

Thiết lập là true nếu phím Shift được nhấn khi sự kiện được kích hoạt, nếu không là false

12target

Nhận diện phần tử mà với nó sự kiện được kích hoạt

13timeStamp

timestamp (giá trị mili giây) khi sự kiện được tạo ra

14type

Với tất cả sự kiện, xác định loại sự kiện mà được kích hoạt

15which

Với các sự kiện liên quan tới bàn phím, xác định code giá trị số cho phím mà gây ra sự kiện, và với các sự kiện liên quan tới chuột, xác định nút nào được nhấn (1 cho nút trái, 2 cho ở giữa và 3 cho nút phải)

Ví dụ:

<html> 
  <head> 
     <title>The jQuery Example</title> 
     <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( event ){ 
              alert('Event type is ' + event.type); 
              alert('pageX : ' + event.pageX); 
              alert('pageY : ' + event.pageY); 
              alert('Target : ' + event.target.innerHTML); 
           }); 
        }); 
     </script> 
     <style> 
        .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} 
     </style> 
  </head> 
  <body> 
     <p>Click on any square below to see the result:</p> 
     <div class="div" style="background-color:blue;">ONE</div> 
     <div class="div" style="background-color:green;">TWO</div> 
     <div class="div" style="background-color:red;">THREE</div> 
  </body> 
</html>

Các phương thức của đối tượng Event trong jQuery

Dưới đây liệt kê các phương thức mà có thể được gọi trên một đối tượng Event trong jQuery:

STTPhương thức & Miêu tả
1preventDefault()

Ngăn cản trình duyệt thực thi hành động mặc định

2isDefaultPrevented()

Trả về có hay không phương thức event.preventDefault() đã từng được gọi trên đối tượng Event này

3stopPropagation()

Dừng bubble một sự kiện tới các phần tử cha, ngăn cản bất cứ phần tử cha nào được thông báo về sự kiện này

4isPropagationStopped()

Trả về có hay không event.stopPropagation() đã từng gọi trên đối tượng Event này

5stopImmediatePropagation()

Dừng phần còn lại của các Handler từ việc được thực thi

6isImmediatePropagationStopped()

Trả về có hay không event.stopImmediatePropagation() đã từng được gọi trên đối tượng Event này

Các phương thức thao tác đối tượng Event trong jQuery

Bảng dưới liệt kê các phương thức quan trọng liên quan tới Event trong jQuery:

STTPhương thức & Miêu tả
1bind( type, [data], fn )

Bind một Handler tới một hoặc nhiều sự kiện cho mỗi phần tử đã so khớp. Có thể cũng bind các sự kiện Custom

2off( events [, selector ] [, handler(eventObject) ] )

Nó gỡ bỏ một sự kiện sống được bind

3hover( over, out )

Bắt chước việc hover cho sự di chuyển ví dụ của chuột trên và rời khỏi một đối tượng

4on( events [, selector ] [, data ], handler )

Bind một Handler tới một sự kiện cho tất cả phần tử hiện tại, tương lai, và đã kết nối. Có thể cũng bind các sự kiện custom.

5one( type, [data], fn )

Bind một Handler tới một hoặc nhiều sự kiện để được thực thi một lần cho mỗi phần tử đã so khớp

6ready( fn )

Bind một hàm để được thực thi bất cứ khi nào DOM sẵn sàng để được thao tác

7trigger( event, [data] )

Kích hoạt một sự kiện trên mỗi phần tử đã so khớp

8triggerHandler( event, [data] )

Kích hoạt tất cả Event Handler được bind trên một phần tử

9unbind( [type], [fn] )

Thực hiện ngược lại với bind, nó gỡ bỏ các đối tượng được bind từ mỗi phần tử đã so khớp

Các phương thức Event Helper trong jQuery

jQuery cũng cung cấp một tập hợp các hàm Event 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 thức Trigger trong jQuery

Dưới đây là ví dụ sẽ kích hoạt sự kiện blur trên tất cả đoạn văn:

$("p").blur();

Phương thức Binding trong jQuery

Ví dụ sau sẽ bind một sự kiện click trên tất cả phần tử <div>:

$("div").click( function () {
// làm gì đó ở đây
});

Bảng dưới liệt kê đầy đủ tất cả phương thức được hỗ trợ bởi jQuery:

STTPhương thức & Miêu tả
1blur( )

Kích hoạt sự kiện blur của mỗi phần tử đã so khớp

2blur( fn )

Bind một hàm tới sự kiện blur của mỗi phần tử đã so khớp

3change( )

Kích hoạt sự kiện change của mỗi phần tử đã so khớp

4change( fn )

Bind một hàm tới sự kiện change của mỗi phần tử đã so khớp

5click( )

Kích hoạt sự kiện click của mỗi phần tử đã so khớp

6click( fn )

Bind một hàm tới sự kiện click của mỗi phần tử đã so khớp

7dblclick( )

Kích hoạt sự kiện dblclick của mỗi phần tử đã so khớp

8dblclick( fn )

Bind một hàm tới sự kiện dblclick của mỗi phần tử đã so khớp

9error( )

Kích hoạt sự kiện error của mỗi phần tử đã so khớp

10error( fn )

Bind một hàm tới sự kiện error của mỗi phần tử đã so khớp

11focus( )

Kích hoạt sự kiện focus của mỗi phần tử đã so khớp

12focus( fn )

Bind một hàm tới sự kiện focus của mỗi phần tử đã so khớp

13keydown( )

Kích hoạt sự kiện keydown của mỗi phần tử đã so khớp

14keydown( fn )

Bind một hàm tới sự kiện keydown của mỗi phần tử đã so khớp

15keypress( )

Kích hoạt sự kiện keypress của mỗi phần tử đã so khớp

16keypress( fn )

Bind một hàm tới sự kiện keypress của mỗi phần tử đã so khớp

17keyup( )

Kích hoạt sự kiện keyup của mỗi phần tử đã so khớp

18keyup( fn )

Bind một hàm tới sự kiện keyup của mỗi phần tử đã so khớp

20load( fn )

Bind một hàm tới sự kiện load của mỗi phần tử đã so khớp

21mousedown( fn )

Bind một hàm tới sự kiện mousedown của mỗi phần tử đã so khớp

22mouseenter( fn )

Bind một hàm tới sự kiện mouseenter của mỗi phần tử đã so khớp

23mouseleave( fn )

Bind một hàm tới sự kiện mouseleave của mỗi phần tử đã so khớp

24mousemove( fn )

Bind một hàm tới sự kiện mouseover của mỗi phần tử đã so khớp

25mouseout( fn )

Bind một hàm tới sự kiện mouseout của mỗi phần tử đã so khớp

26mouseover( fn )

Bind một hàm tới sự kiện mouseover của mỗi phần tử đã so khớp

27mouseup( fn )

Bind một hàm tới sự kiện mouseup của mỗi phần tử đã so khớp

28resize( fn )

Bind một hàm tới sự kiện resize của mỗi phần tử đã so khớp

29scroll( fn )

Bind một hàm tới sự kiện scroll của mỗi phần tử đã so khớp

30select( )

Kích hoạt sự kiện select của mỗi phần tử đã so khớp

31select( fn )

Bind một hàm tới sự kiện select của mỗi phần tử đã so khớp

32submit( )

Kích hoạt sự kiện submit của mỗi phần tử đã so khớp

33submit( fn )

Bind một hàm tới sự kiện submit của mỗi phần tử đã so khớp

34unload( fn )

Bind một hàm tới sự kiện unload của mỗi phần tử đã so khớp

Theo tutorialspoint

Bài trước: Thao tác DOM trong jQuery

Bài tiếp: jQuery Ajax

Thứ Tư, 28/10/2020 22:05
43 👨 3.251
0 Bình luận
Sắp xếp theo