jQuery - Xử lý sự kiện

Chúng tôi có khả năng tạo các trang web động bằng cách sử dụng các sự kiện. Sự kiện là các hành động có thể được phát hiện bởi Ứng dụng web của bạn.

Sau đây là các sự kiện ví dụ -

  • Một cú nhấp chuột
  • Đang tải một trang web
  • Di chuột qua một phần tử
  • Gửi biểu mẫu HTML
  • Một lần gõ phím trên bàn phím của bạn, v.v.

Khi các sự kiện này được kích hoạt, bạn có thể sử dụng một chức năng tùy chỉnh để làm bất cứ điều gì bạn muốn với sự kiện. Các chức năng tùy chỉnh này gọi Trình xử lý sự kiện.

Trình xử lý sự kiện ràng buộc

Sử dụng Mô hình sự kiện jQuery, chúng ta có thể thiết lập các trình xử lý sự kiện trên các phần tử DOM với bind() phương pháp như sau -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

Mã này sẽ khiến phần tử phân chia phản hồi với sự kiện nhấp chuột; khi người dùng nhấp vào bên trong bộ phận này sau đó, cảnh báo sẽ được hiển thị.

Điều này sẽ tạo ra kết quả sau:

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

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

Sau đây là mô tả của các tham số:

  • eventType- Một chuỗi chứa loại sự kiện JavaScript, chẳng hạn như nhấp chuột hoặc gửi. Tham khảo phần tiếp theo để biết danh sách đầy đủ các loại sự kiện.

  • eventData - Đây là tham số tùy chọn là một bản đồ dữ liệu sẽ được chuyển đến bộ xử lý sự kiện.

  • handler - Một chức năng để thực thi mỗi khi sự kiện được kích hoạt.

Xóa trình xử lý sự kiện

Thông thường, một khi trình xử lý sự kiện được thiết lập, trình xử lý sự kiện vẫn có hiệu lực trong phần còn lại của trang. Có thể có nhu cầu khi bạn muốn xóa trình xử lý sự kiện.

jQuery cung cấp unbind()lệnh để loại bỏ một trình xử lý sự kiện đang thoát. Cú pháp của unbind () như sau:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Sau đây là mô tả của các tham số:

  • eventType- Một chuỗi chứa loại sự kiện JavaScript, chẳng hạn như nhấp chuột hoặc gửi. Tham khảo phần tiếp theo để biết danh sách đầy đủ các loại sự kiện.

  • handler - Nếu được cung cấp, hãy xác định người nghe cụ thể sẽ bị xóa.

Các loại sự kiện

Sr.No. Loại & Mô tả sự kiện
1

blur

Xảy ra khi phần tử mất tiêu điểm.
2

change

Xảy ra khi phần tử thay đổi.
3

click

Xảy ra khi nhấp chuột.
4

dblclick

Xảy ra khi nhấp đúp chuột.
5

error

Xảy ra khi có lỗi trong quá trình tải hoặc dỡ hàng, v.v.
6

focus

Xảy ra khi phần tử được lấy nét.
7

keydown

Xảy ra khi phím được nhấn.
số 8

keypress

Xảy ra khi nhấn và nhả phím.
9

keyup

Xảy ra khi khóa được phát hành.
10

load

Xảy ra khi tài liệu được tải.
11

mousedown

Xảy ra khi nhấn nút chuột.
12

mouseenter

Xảy ra khi chuột vào trong một vùng phần tử.
13

mouseleave

Xảy ra khi chuột rời khỏi vùng phần tử.
14

mousemove

Xảy ra khi con trỏ chuột di chuyển.
15

mouseout

Xảy ra khi con trỏ chuột di chuyển ra khỏi một phần tử.
16

mouseover

Xảy ra khi con trỏ chuột di chuyển qua một phần tử.
17

mouseup

Xảy ra khi thả nút chuột.
18

resize

Xảy ra khi cửa sổ được thay đổi kích thước.
19

scroll

Xảy ra khi cửa sổ được cuộn.
20

select

Xảy ra khi một văn bản được chọn.
21

submit

Xảy ra khi biểu mẫu được gửi.
22

unload

Xảy ra khi tài liệu được tải xuống.

Đối tượng sự kiện

Hàm gọi lại nhận một tham số duy nhất; khi trình xử lý được gọi là đối tượng sự kiện JavaScript sẽ được chuyển qua nó.

Đối tượng sự kiện thường là không cần thiết và tham số bị bỏ qua, vì ngữ cảnh đầy đủ thường có sẵn khi trình xử lý bị ràng buộc biết chính xác những gì cần phải thực hiện khi trình xử lý được kích hoạt, tuy nhiên có một số thuộc tính nhất định mà bạn cần được truy cập.

Các thuộc tính sự kiện

Sr.No. Kê khai tài sản
1

altKey

Đặt thành true nếu phím Alt được nhấn khi sự kiện được kích hoạt, false nếu không. Phím Alt được gắn nhãn Tùy chọn trên hầu hết các bàn phím Mac.
2

ctrlKey

Đặt thành true nếu phím Ctrl được nhấn khi sự kiện được kích hoạt, false nếu không.
3

data

Giá trị, nếu có, được truyền làm tham số thứ hai cho lệnh bind () khi trình xử lý được thiết lập.
4

keyCode

Đối với các sự kiện nhấn phím và nhấn phím, thao tác này sẽ trả về phím đã được nhấn.
5

metaKey

Đặt thành true nếu phím Meta được nhấn khi sự kiện được kích hoạt, false nếu không. Phím Meta là phím Ctrl trên PC và phím Command trên Mac.
6

pageX

Đối với sự kiện chuột, chỉ định tọa độ ngang của sự kiện tương đối từ nguồn gốc trang.
7

pageY

Đối với các sự kiện chuột, chỉ định tọa độ dọc của sự kiện tương đối từ nguồn gốc trang.
số 8

relatedTarget

Đối với một số sự kiện chuột, xác định phần tử mà con trỏ để lại hoặc nhập khi sự kiện được kích hoạt.
9

screenX

Đối với sự kiện chuột, chỉ định tọa độ ngang của sự kiện tương đối từ điểm gốc màn hình.
10

screenY

Đối với sự kiện chuột, chỉ định tọa độ dọc của sự kiện tương đối từ gốc màn hình.
11

shiftKey

Đặt thành true nếu phím Shift được nhấn khi sự kiện được kích hoạt, false nếu không.
12

target

Xác định phần tử mà sự kiện đã được kích hoạt.
13

timeStamp

Dấu thời gian (tính bằng mili giây) khi sự kiện được tạo.
14

type

Đối với tất cả các sự kiện, chỉ định loại sự kiện đã được kích hoạt (ví dụ: nhấp chuột).
15

which

Đối với sự kiện bàn phím, chỉ định mã số cho phím gây ra sự kiện và đối với sự kiện chuột, chỉ định nút nào được nhấn (1 cho trái, 2 cho giữa, 3 cho phải).

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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>

Điều này sẽ tạo ra kết quả sau:

Các phương thức sự kiện

Có một danh sách các phương thức có thể được gọi trên Đối tượng sự kiện -

Sr.No. Phương pháp & Mô tả
1 ngăn chặn Mặc định()

Ngăn trình duyệt thực hiện hành động mặc định.
2 isDefaultPrevented ()

Trả về liệu event.preventDefault () đã từng được gọi trên đối tượng sự kiện này hay chưa.
3 stopPropagation ()

Ngăn chặn việc tạo sự kiện cho các phần tử chính, ngăn không cho bất kỳ trình xử lý gốc nào được thông báo về sự kiện.
4 isPropagationStopped ()

Trả về liệu event.stopPropagation () đã từng được gọi trên đối tượng sự kiện này hay chưa.
5 stopIm InstantPropagation ()

Ngăn phần còn lại của trình xử lý được thực thi.
6 isIm InstantPropagationStopped ()

Trả về liệu event.stopIm InstantPropagation () đã từng được gọi trên đối tượng sự kiện này hay chưa.

Phương pháp thao tác sự kiện

Bảng sau liệt kê các phương pháp quan trọng liên quan đến sự kiện:

Sr.No. Phương pháp & Mô tả
1 ràng buộc (loại, [dữ liệu], fn)

Liên kết trình xử lý với một hoặc nhiều sự kiện (như nhấp chuột) cho mỗi phần tử phù hợp. Cũng có thể ràng buộc các sự kiện tùy chỉnh.
2 tắt (sự kiện [, bộ chọn] [, trình xử lý (eventObject)])

Điều này trái ngược với trực tiếp, nó loại bỏ một sự kiện trực tiếp bị ràng buộc.
3 di chuột (qua, ra ngoài)

Mô phỏng di chuột ví dụ như di chuyển chuột lên và tắt một đối tượng.
4 trên (sự kiện [, bộ chọn] [, dữ liệu], trình xử lý)

Liên kết trình xử lý với một sự kiện (như nhấp chuột) cho tất cả phần tử phù hợp hiện tại - và tương lai. Cũng có thể ràng buộc các sự kiện tùy chỉnh.
5 một (loại, [dữ liệu], fn)

Liên kết một trình xử lý với một hoặc nhiều sự kiện được thực thi một lần cho mỗi phần tử được so khớp.
6 sẵn sàng (fn)

Ràng buộc một hàm phải được thực thi bất cứ khi nào DOM sẵn sàng được duyệt và thao tác.
7 trình kích hoạt (sự kiện, [dữ liệu])

Kích hoạt một sự kiện trên mọi phần tử phù hợp.
số 8 triggerHandler (sự kiện, [dữ liệu])

Kích hoạt tất cả các trình xử lý sự kiện liên kết trên một phần tử.
9 unbind ([type], [fn])

Điều này ngược lại với ràng buộc, nó loại bỏ các sự kiện bị ràng buộc khỏi mỗi phần tử phù hợp.

Phương thức của người trợ giúp sự kiện

jQuery cũng cung cấp một tập hợp các hàm trợ giúp sự kiện có thể được sử dụng để kích hoạt một sự kiện nhằm ràng buộc bất kỳ loại sự kiện nào được đề cập ở trên.

Phương pháp kích hoạt

Sau đây là một ví dụ sẽ kích hoạt sự kiện mờ trên tất cả các đoạn văn:

$("p").blur();

Phương pháp ràng buộc

Sau đây là một ví dụ sẽ ràng buộc một click sự kiện trên tất cả <div> -

$("div").click( function () { 
   // do something here
});
Sr.No. Phương pháp & Mô tả
1

blur( )

Kích hoạt sự kiện mờ của từng phần tử phù hợp.
2

blur( fn )

Liên kết một hàm với sự kiện làm mờ của từng phần tử phù hợp.
3

change( )

Kích hoạt sự kiện thay đổi của từng phần tử phù hợp.
4

change( fn )

Liên kết một hàm với sự kiện thay đổi của từng phần tử được so khớp.
5

click( )

Kích hoạt sự kiện nhấp chuột của từng phần tử phù hợp.
6

click( fn )

Liên kết một chức năng với sự kiện nhấp chuột của mỗi phần tử phù hợp.
7

dblclick( )

Kích hoạt sự kiện dblclick của mỗi phần tử phù hợp.
số 8

dblclick( fn )

Liên kết một hàm với sự kiện dblclick của mỗi phần tử phù hợp.
9

error( )

Kích hoạt sự kiện lỗi của mỗi phần tử phù hợp.
10

error( fn )

Liên kết một hàm với sự kiện lỗi của mỗi phần tử được so khớp.
11

focus( )

Kích hoạt sự kiện trọng tâm của từng phần tử phù hợp.
12

focus( fn )

Liên kết một hàm với sự kiện trọng tâm của mỗi phần tử được so khớp.
13

keydown( )

Kích hoạt sự kiện keydown của mỗi phần tử phù hợp.
14

keydown( fn )

Liên kết một hàm với sự kiện keydown của mỗi phần tử phù hợp.
15

keypress( )

Kích hoạt sự kiện nhấn phím của mỗi phần tử phù hợp.
16

keypress( fn )

Liên kết một hàm với sự kiện nhấn phím của mỗi phần tử phù hợp.
17

keyup( )

Kích hoạt sự kiện keyup của mỗi phần tử phù hợp.
18

keyup( fn )

Liên kết một hàm với sự kiện keyup của mỗi phần tử phù hợp.
19

load( fn )

Liên kết một hàm với sự kiện tải của mỗi phần tử được so khớp.
20

mousedown( fn )

Liên kết một hàm với sự kiện tạm dừng của mỗi phần tử phù hợp.
21

mouseenter( fn )

Liên kết một hàm với sự kiện di chuột của mỗi phần tử phù hợp.
22

mouseleave( fn )

Liên kết một hàm với sự kiện mouseleave của mỗi phần tử được so khớp.
23

mousemove( fn )

Liên kết một hàm với sự kiện di chuyển chuột của mỗi phần tử phù hợp.
24

mouseout( fn )

Liên kết một hàm với sự kiện di chuột của mỗi phần tử được so khớp.
25

mouseover( fn )

Liên kết một hàm với sự kiện di chuột qua của mỗi phần tử được so khớp.
26

mouseup( fn )

Liên kết một hàm với sự kiện di chuột lên của mỗi phần tử được so khớp.
27

resize( fn )

Liên kết một hàm với sự kiện thay đổi kích thước của mỗi phần tử được so khớp.
28

scroll( fn )

Liên kết một hàm với sự kiện cuộn của mỗi phần tử được so khớp.
29

select( )

Kích hoạt sự kiện được chọn của mỗi phần tử phù hợp.
30

select( fn )

Liên kết một hàm với sự kiện được chọn của mỗi phần tử phù hợp.
31

submit( )

Kích hoạt sự kiện gửi của mỗi phần tử phù hợp.
32

submit( fn )

Liên kết một hàm với sự kiện gửi của mỗi phần tử phù hợp.
33

unload( fn )

Liên kết một hàm với sự kiện dỡ bỏ của mỗi phần tử được so khớp.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved