Nguyên mẫu - Xử lý sự kiện

Quản lý sự kiện là một trong những thách thức lớn nhất để đạt được kịch bản trên nhiều trình duyệt. Mỗi trình duyệt đều có các cách tiếp cận khác nhau để xử lý các phím bấm.

Prototype Framework xử lý tất cả các vấn đề về khả năng tương thích giữa các trình duyệt và giúp bạn không gặp phải mọi rắc rối liên quan đến quản lý sự kiện.

Prototype Framework cung cấp không gian tên Sự kiện , chứa đầy các phương thức, tất cả đều lấy đối tượng sự kiện hiện tại làm đối số và vui vẻ tạo ra thông tin bạn đang yêu cầu, trên tất cả các trình duyệt chính.

Không gian tên sự kiện cũng cung cấp danh sách mã khóa được chuẩn hóa mà bạn có thể sử dụng với các sự kiện liên quan đến bàn phím. Các hằng số sau được xác định trong không gian tên:

Không. Hằng số & Mô tả chính
1.

KEY_BACKSPACE

Biểu diễn phím khoảng trắng trở lại.

2.

KEY_TAB

Biểu diễn phím tab.

3.

KEY_RETURN

Biểu diễn khóa trả về.

4.

KEY_ESC

Đại diện cho khóa esc.

5.

KEY_LEFT

Biểu diễn phím bên trái.

6.

KEY_UP

Đại diện cho khóa.

7.

KEY_RIGHT

Biểu diễn khóa bên phải.

số 8.

KEY_DOWN

Đại diện cho phím xuống.

9.

KEY_DELETE

Đại diện cho khóa xóa.

10.

KEY_HOME

Đại diện cho phím home.

11.

KEY_END

Đại diện cho khóa kết thúc.

12.

KEY_PAGEUP

Đại diện cho khóa trang lên.

13.

KEY_PAGEDOWN

Phím đại diện xuống trang.

Cách xử lý sự kiện

Trước khi bắt đầu, chúng ta hãy xem một ví dụ về việc sử dụng phương thức sự kiện. Ví dụ này cho thấy cách nắm bắt phần tử DOM mà sự kiện đã xảy ra.

Thí dụ

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Đầu ra

Đây là danh sách đầy đủ tất cả các phương pháp liên quan đến Event. Các chức năng mà bạn có nhiều khả năng sẽ sử dụng nhiều nhất là quan sát , yếu tốdừng .

Phương pháp sự kiện nguyên mẫu

NOTE - Đảm bảo ít nhất bạn có phiên bản 1.6 của prototype.js.

Không. Phương pháp & Mô tả
1. thành phần()

Trả về phần tử DOM mà sự kiện đã xảy ra.

2. mở rộng()

Mở rộng sự kiện với tất cả các phương thức có trong Event.Methods.

3. findElement ()

Trả về phần tử DOM đầu tiên có tên thẻ đã cho, trở lên từ phần tử mà sự kiện đã xảy ra.

4. isLeftClick ()

Xác định xem sự kiện chuột liên quan đến nút có phải là về nút "trái" (thực tế là chính) hay không.

5. quan sát ()

Đăng ký một trình xử lý sự kiện trên một phần tử DOM.

6. pointerX ()

Trả về vị trí ngang tuyệt đối cho một sự kiện chuột.

7. con trỏY ()

Trả về vị trí thẳng đứng tuyệt đối cho một sự kiện chuột.

số 8. dừng lại()

Dừng sự lan truyền của sự kiện và cuối cùng ngăn hành động mặc định của nó được kích hoạt.

9. stopObserving ()

Hủy đăng ký một trình xử lý sự kiện.

10. dỡ bỏ bộ nhớ đệm ()

Hủy đăng ký tất cả các trình xử lý sự kiện đã đăng ký thông qua quan sát. Tự động có dây cho bạn. Không có sẵn kể từ ngày 1.6.