Chủ Nhật, 3 tháng 1, 2016

SK JS

1/03/2016 05:45:00 CH    No comments
123 Blog ♥ Xử Lý Các Sự Kiện Trong Jquery (8) - học nhanh jquery

Xử Lý Các Sự Kiện Trong Jquery (8)

By  Nguyễn Nam     học nhanh jquery

Đây là bài viết thứ 8 trong chuỗi serries “Học nhanh Jquery”, Bài viểt này cần bạn cần bạn hiểu thế nào là event, biết cách viết và sử dụng các event trong JavaScript, và nhất là cơ bản về HTML/CSS.

Chúng ta có thể xây dựng các trang web động bằng cách sử dụng các sự kiện. Các sự kiện là các hành động tương tác trên ứng dụng web của bạn.

Dưới đây là một vài sự kiện có thể bạn đã gặp như:

  • Sự kiện kích chuột.
  • Sự kiện tải trang.
  • Khi di chuột đến một phần tử trong trang web.
  • Khi submit một form.
  • Khi nhấn một phím tắt trên bàn phím.
  • Và nhiều sự kiện khác.

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

Xử lý sự kiện ràng buộc (Binding)

Chúng ta có thể thiết lập các xử lý sự kiện trên các phần tử bằng phương thức bind():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
    <title>jQuery event binding</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>

Trong ví dụ trên, khi người click vào phần tử div, sẽ gọi sự kiện click và thông báo một cửa sổ popup.

Cú pháp sử dụng:

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

  • eventType: Một chuỗi có chứa một loại sự kiện javaScript. Chẳng hạn như sự kiện click hoặc submit. Bạn cũng có thể tham khảo danh sách các kiểu sự kiện đầy đủ ở những nội dung bên dưới bài viết.
  • eventData: Đây là tham số tùy chọn, giống như một bản đồ dữ liệu sẽ được thông qua để xử lý sự kiện.
  • handler: Một hàm thực thi khi sự kiện được kích hoạt.

Xử lý sự kiện Loại bỏ (Removing)

Thông thường, khi một sự kiện được thiết lập, Nó vẫn có hiệu lực cho đến khi kết thúc trang web đó hoặc tắt nó đi, Nhưng đôi khi trong một số trường hợp, bạn chỉ cần loại bỏ sự kiện này đi.

Trong jQuery cung cấp một phương thức unbind() giúp loại bỏ một sự kiện xử lý đã tồn tại.

Cú pháp:

1
2
3

selector.unbind(eventType, handler)
Hoặc
selector.unbind(eventType)

Các tham số:

  • eventType: Một chuỗi có chứa một loại sự kiện javaScript. Chẳng hạn như sự kiện click hoặc submit. Bạn cũng có thể tham khảo danh sách các kiểu sự kiện đầy đủ ở những nội dung bên dưới bài viết.
  • handler: Có thể được khai bào Một hàm thực thi trước khi loại bỏ sự kiện.

Danh sách các kiểu sự kiện


  • Blur: Xảy ra khi các phần tử input có focus.
  • change: Xảy ra khi phần tử thay đổi.
  • click: Xảy ra khi click chuột.
  • dblclick: Xảy ra khi kích đúp chuột.
  • error: Xảy ra khi có một lỗi khi tải về hoặc ngừng tải.
  • focus: Xảy ra khi phần tử get focus.
  • keydown: Xảy ra khi nhấn một phím bất kỳ.
  • keypress: Xảy ra khi nhấn một phím và thả.
  • keyup: Xảy ra khi thả một phím.
  • load: Xảy ra khi tài liệu đang được tải về.
  • mousedown: Xảy ra khi nhấn chuột vào một button.
  • mouseenter: Xảy ra khi di chuột qua một phần tử.
  • mouseleave: Xảy ra khi rời chuột khỏi một phần tử.
  • mousemove: Xảy ra khi di chuyển con trỏ chuột.
  • mouseout: Xảy ra khi con trỏ chuột di chuyển khỏi phần tử.
  • mouseover: Xảy ra khi con trỏ chuột di chuyển trên (qua) một phần tử.
  • mouseup: Xảy ra khi con chuột dừng nhấn một button.
  • resize: Xảy ra khi cửa sổ thay đổi kích cỡ.
  • scroll: Xảy ra khi cuộn tài liệu.
  • select: Xảy ra khi văn bản được chọn.
  • submit: Xảy ra khi nhấn nút submit trong form.
  • unload: Xảy ra khi tài liệu hủy tải.

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

Hàm callback cần một tham số duy nhất, khi hàm xử lý được gọi thì các đối tượng javascript trong sự kiện được gọi qua nó.

Các đối tượng trong sự kiện thường không cần thiết, và các tham số có thể được bỏ qua. Nhưng trên thực tế thì cần nên khai báo các tham số để biết chĩnh xác những gì cần phải thực hiện khi hàm xử lý được kích hoạt.

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

  • altKey: Thiết lập la true nếu phím alt được nhấn khi sự kiện này được kích hoạt và ngược lại là false. Phím alt là nhãn tùy chọn trên hầu hết bàn phím hiện nay.
  • ctrlKey: Thiết lập là true nếu phím ctrl được nhấn khi sự kiện được kích hoạt và false nếu không.
  • data: Giống như tham số thứ hai đến phương thức bind() khi hàm xử lý được thiết lập.
  • keyCode: Sử dụng cho 2 sự kiện keyup và keydown, thuộc tính này trả về phím đã được nhấn.
  • metaKey: Sử dụng đối với sự kiện mouse, xác định chiều ngang cụ thể của các sự kiện.
  • pageY: Đối với sự kiện mouse, xác định chiều dọc cụ thể của các sự kiện.
  • relatedTarget: Đối với một số sự kiện mouse, xác định các phần tử chuột trái và nhập khi sự kiện này được kích hoạt.
  • screenX: Đối với sự kiện mouse, xác đinh chiều ngang tương đối của sự kiện đó từ gốc màn hình.
  • screenY: Đối với sự kiện mouse, xác định chiều dọc tương đối của sự kiện đó tính từ gốc màn hình.
  • shiftKey: Thiết lập là true nếu như phím shift được nhấn khi sự kiến được kích hoạt và false nếu không.
  • target: Xác định phần tử mà sự kiện đã kích hoạt.
  • timeStamp: Xác định thời gian (tính bằng mili giây) khi sự kiện này được tạo ra.
  • type: áp dụng tất cả sự kiện, xác định kiểu sự kiện khi đã được kích hoạt.
  • which: áp dụng cho sự kiện keybord, xác định một mà phím là số sẽ tạo ra sự kiện và cho sự kiện mouse để xác định các nút ấn (1- trái , 2- giữa, 3- Phải).

Ví dụ:

1
2
3
4
5
6
7
8

$(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);
    });
});

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

1. Phương thức preventDefault()

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

2. Phương thức isDefaultPrevented()

Phương thức này sẽ kiểm tra xem phương thức preventDefault() đã được gọi đối với sự kiện này chưa. Nếu chưa thì sẽ cho phép thực hiện hành đông mặc định.

3. Phương thức stopPropagation()

Dừng hành động xử lý sự kiện đối với các phần tử cha mẹ. Có nghĩa là Ngăn cản hành động xử lý của sự kiện cha khi hành động chỉ được gọi trong sự kiện con.

4. Phương thức isPropagationStopped()

Kiểm tra xem phương thức event.stopPropagation() đã gọi đối tượng sự kiện chưa.

5. Phương thức stopImmediatePropagation()

Ngăn chặn các phần còn lại thực thi của hàm xử lý.

6. Phương thức isImmediatePropagationStopped()

Kiểm tra xem phương thức event.stopImmediatePropagation() đã gọi sự kiện nào.

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

1. Phương thức bind( type, [data], fn )

Ràng buộc một hàm xử lý cho một hoặc nhiều sự kiện (như sự kiện click) 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. Phương thức off( events [,selector] [,handler(eventObject)])

Loại bỏ sự ràng buộc của một sự kiện đang tồn tại.

3. Phương thức hover( over, out )

Phương thức này xử lý 2 loại sự kiện là mouseenter và mouseleave.

4. Phương thức on( events [,selector][,data],handler)

Kích hoạt hàm xử lý cho sự kiện hiện tại.

5. Phương thức one( type, [data], fn )

Liên kết một hàm xử lý với một hoặc nhiều sự kiện được thực hiện một lần cho mỗi phần tử phù hợp.

6. Phương thức ready( fn )

Thực thi sau khi lớp Dom Sẵn sáng.

7. Phương thức trigger( event, [data] )

Kích hoạt một sự kiện trên mỗi phần tử phù hợp.

Các phương thức HELPER

jquery cũng cung cấp một tập hợp các hàm helper có thể sử dụng để kích hoạt bất cứ sự kiện và loại sự kiện nào.

Nội dung bài tiếp theo

Jquery Ajax.

 

0 nhận xét:

Đăng nhận xét