Lắng tai sự kiện

Tất cả chúng ta có thể dùng directive v-on để lắng tai các sự kiện DOM và thực thi JavaScript khi những sự kiện này được kích hoạt. Ví dụ:

Bạn Đang Xem: Xử lí sự kiện

Kết quả:

Phương thức xử lí sự kiện

Trong thực tế, logic để xử lí sự kiện thường phức tạp hơn, vì thế chứa JavaScript trực tiếp trong giá trị của tính chất v-on như trên là không khả thi. Đó là lí do v-on cũng có thể có thể nhận tên của một phương thức mà bạn muốn gọi. Ví dụ:

Kết quả:

Gọi phương thức inline

Thay vì bind trực tiếp tên phương thức, ta cũng có thể có thể gọi phương thức trong một câu lệnh JavaScript:

Kết quả:

Thỉnh thoảng tất cả chúng ta cũng muốn truy xuất tới sự kiện DOM ban sơ từ câu lệnh JavaScript inline. Chúng ta cũng có thể truyền sự kiện DOM vào phương thức thông qua biến $sự kiện:

Sự kiện modifier

Trong rất nhiều trường hợp, tất cả chúng ta cần gọi sự kiện.preventDefault() hoặc sự kiện.stopPropagation() bên trong một phương thức xử lí sự kiện. Tuy việc này sẽ không có gì khó, sẽ tốt hơn nếu các phương thức chỉ phải tập trung giải quyết và xử lý logic tài liệu thay vì phụ trách các sự kiện DOM.

Để giải quyết và xử lý vấn đề này, Vue cung cấp các sự kiện modifier cho v-on. Sự kiện modfier là một hậu tố (postfix) cho directive, được biểu thị bằng một dấu chấm.

• .stop
• .prevent
• .capture
• .self
• .once

Khi sử dụng nhiều modifier cùng lúc, trật tự nối là rất quan trọng, vì code sẽ tiến hành tạo ra theo như đúng trật tự đó. Ví dụ, `@click.prevent.selfsẽ ngăn **toàn bộ click** còn@click.self.prevent` chỉ ngăn các click trên chính thành phần đang rất được nhắc đến.

Từ phiên bản 2.1.4 trở đi

Xem Thêm : Du lịch là gì? Giải thích những thuật ngữ thường dùng trong du lịch

Không như các modifier khác, vốn chỉ dùng được cho những sự kiện DOM native, modifier .once cũng có thể có thể dùng cho những sự kiện component. Nếu như bạn chưa đọc về component, có thể bỏ qua và quay trở về sau.

Từ phiên bản 2.3.0 trở đi

Vue cũng cung cấp modifier .passive, tương ứng với tùy chọn passive cho addEventListener.

Modifier .passive đặc biệt quan trọng hữu ích để cải thiện hiệu năng của ứng dụng trên các thiết bị di động.

Đừng dùng .passive và .prevent cùng nhau, vì .prevent sẽ không còn có hiệu lực, và trình duyệt có thể sẽ bật cảnh báo. Nên nhớ rằng .passive thông tin cho trình duyệt biết rằng bạn không muốn ngăn chặn hành vi mặc định của việc kiện.

Key modifier

Khi lắng tai các sự kiện bàn phím (keyboard sự kiện), tất cả chúng ta thường phải kiểm tra mã phím (key code). Vue tương trợ thêm key modifier (modifer cho mã phím) cho v-on trong các trường hợp này:

Tất nhiên nếu phải nhớ toàn bộ các mã phím thì rất mỏi mệt, nên Vue cung cấp alias (bí danh) cho những phím thông dụng nhất:

Sau đây là list đầy đủ của khá nhiều key modifier:

• .enter
• .tab
• .delete (dùng cho tất cả hai phím “Delete” và “←”)
• .esc
• .space
• .up
• .down
• .left
• .right

Bạn cũng có thể có thể tự khái niệm alias cho key modifier bằng object toàn cục config.keyCodes:

Key modifier tự động hóa

2.5.0+

Bạn cũng có thể có thể sử dụng bất kì tên phím hợp thức nào để làm modifier bằng phương pháp chuyển sang kebab-case:

Trong ví dụ trên, hàm onPageDown chỉ được gọi nếu $sự kiện.key === ‘PageDown’.

Một số ít phím (esc và các phím mũi tên) có mức giá trị key không thống nhất trên IE9. Nếu cần tương trợ IE9, bạn nên dùng các alias như trên đây.

Các phím modifier mạng lưới hệ thống

Xem Thêm : “Du học” trong tiếng Anh: Định nghĩa, Ví dụ

Từ phiên bản 2.1.0 trở đi

Chúng ta cũng có thể sử dụng các modifier sau để chỉ kích hoạt các sự kiện listener lúc các phím modifier tương ứng được nhấn:

• .ctrl
• .alt
• .shift
• .meta

Trên các bàn phím của hệ Macintosh, meta là phím Command (⌘). Trên bàn phím Windows, meta là phím Windows (⊞). Trên bàn phím Sun Microsystems, meta được lưu lại bằng một hình thoi (◆). Trên một số loại bàn phím nhất định như bàn phím của MIT và Lisp, meta có nhãn “META”. Trên bàn phím Symbolics, meta có nhãn “META” hoặc “Meta”.

Ví dụ:

Các phím modifier có cách hoạt động khác với phím thông thường, và khi sử dụng với sự kiện keyup, phím modifier phải được nhấn khi sự kiện được phát ra. Nói một cách khác, keyup.ctrl sẽ chỉ được kích hoạt khi chúng ta thả một phím khi vẫn đang ấn phím ctrl. Sự kiện này sẽ không còn được kích hoạt nếu như khách hàng chỉ thả một mình phím ctrl.

Modifier .exact

2.5.0+

Modifier .exact (chuẩn xác) có thể được sử dụng kết phù hợp với các modifier khác để chỉ rõ rằng hàm xử lí sự kiện nên làm được thực thi khi chuẩn xác tổng hợp phím/chuột này được bấm.

Modifier cho phím chuột

Từ phiên bản 2.2.0 trở đi

• .left
• .right
• .middle

Những modifier này giới hạn xử lí cho những sự kiện được kích hoạt bởi một phím chuột nhất định (trái, phải, hoặc giữa).

Vì sao lại lắng tai sự kiện trong HTML?

Chúng ta cũng có thể lo ngại rằng toàn bộ việc lắng tai sự kiện bằng phương pháp đặt sự kiện listener trong HTML như vậy này là vi phạm quy tắc “separation of concerns.” Cứ yên tâm, vì tất cả những hàm và biểu thức xử lí sự kiện của Vue được ràng buộc chặt chẽ với ViewModel, sẽ không còn có khó khăn gì trong việc bảo trì. Thật ra, sử dụng v-on còn tồn tại những lợi ích sau:

1. Giúp định vị hàm xử lí trong code JavaScript được dễ dàng hơn bằng phương pháp đọc lướt template HTML.

2. Vì không phải attach hàm xử lí sự kiện trong JavaScript một cách thủ công, code trong ViewModel trở thành thuần logic và không phụ thuộc vào DOM. Điều này giúp tất cả chúng ta dễ viết test.

3. Khi một ViewModel bị hủy, tất cả hàm xử lí sự kiện đính kèm cũng được tự động hóa gỡ bỏ mà không cần bạn phải quét dọn.