Giới thiệu về event
- Events là phương thức giao tiếp giữa View Layer và Logic layer
- Events sẽ gửi các thao tác của user sang Logic layer để thực thi.
- Event có thể được liên kết với Component và khi đạt đến điều kiện kích hoạt, hàm sự kiện tương ứng trong Logic Layer sẽ được thực thi.
- Event objects có thể mang thêm thông tin bổ sung, chẳng hạn như id, dataset, touches.
Cách sử dụng:
Giả sử chúng ta cần handle sự kiện tap ở 1 view bất kỳ. Ở file .txml
<view id="tapTest" data-name="Test view" onTap="tapName">
Click me!
</view>
Ở Page tương ứng, ta thêm hàm tapName
để bind event onTap từ view sang lớp logic
Page({
tapName(event) {
console.log(event);
},
});
Quan sát console log, chúng ta sẽ thấy:
{
"type": "tap",
"target": {
"id": "tapTest",
"tagName": "view",
"dataset": {
"name": "Test view"
}
},
"timeStamp": 1611557634256
}
Khi sử dụng các component (basic component, extend component và custom component), event nào có sẵn trong thành phần phụ thuộc vào việc bản thân thành phần đó có hỗ trợ hay không. Các event được hỗ trợ sẽ được liệt kê rõ ràng trong tài liệu của component.
Event type
Events được chia làm 2 loại:
- Bubbling event: sẽ có chứa prefix là
on
ví dụonTap
. Khi node con trigger event, nó sẽ trigger thêm event của node cha. - Non-bubbling event: sẽ có chứa prefix là
catch
ví dụcatchTap
. Khi node con trigger event, nó sẽ không trigger event của node cha.
Các binding event cũng tương tự như cách set thuộc tính của component gồm key và value
key
: có prefix làon
hoặccatch
, sau đó là type của event ví dụonTap
,catchTap
.value
: là string. Giá trị này sẽ là tên của method của event trong Page. Nếu page ko define method này, khi event được trigger sẽ throw error.
<view id="outter" onTap="handleTap1">
view1
<view id="middle" catchTap="handleTap2">
view2
<view id="inner" onTap="handleTap3">
view3
</view>
</view>
</view>
Trong ví dụ trên, nhấp vào view3 sẽ kích hoạt handleTap3 và handleTap2 liên tiếp (vì sự kiện chạm sẽ bubble đối với view2 và view2 ngăn sự kiện bubble và không còn chuyển đến nút cha), nhấp vào view2 sẽ kích hoạt handleTap2, và nhấp vào view1 sẽ kích hoạt handleTap1.
Tất cả bubbling events:
Loại event | Điều kiện kích hoạt |
---|---|
touchStart | Người dùng chạm ngón tay vào element trên màn hình cảm ứng |
touchMove | Người dùng kéo rê ngón tay trên màn hình cảm ứng sau khi đã chạm vào element |
touchEnd | Người dùng buông ngón tay ra khỏi element trên màn hình cảm ứng sau sau đã chạm hoặc kéo rê ngón tay |
touchCancel | touch action bị huỷ bỏ do có call reminder hoặc 1 popup |
tap | Người dùng chạm ngón tay vào element trên màn hình cảm ứng. Nó chính là sự kiện ngắn xảy ra giữa touchStart và touchEnd. |
longTap | Người dùng chạm ngón tay vào element trên màn hình cảm ứng giữ lâu hơn 500ms. |
onAnimationStart | CSS transition hoàn tất. |
onAnimationIteration | Sự kiện này được kích hoạt khi CSS Animation kết thúc 1 iteration. |
onAnimationEnd | CSS Animation kết thúc. |
onTransitionEnd | CSS transition hoàn tất. |