위챗 미니 프로그램 튜토리얼 이벤트

이벤트란 무엇인가요?

이벤트는 뷰 레이어에서 로직 레이어로의 통신 방법입니다.

이벤트는 처리를 위해 사용자 행동을 논리 계층에 피드백할 수 있습니다.

이벤트는 구성 요소에 바인딩될 수 있습니다. 트리거 이벤트에 도달하면 논리 계층의 해당 이벤트 처리 기능이 실행됩니다.

이벤트 객체는 ID, 데이터세트, 터치 등의 추가 정보를 전달할 수 있습니다.

이벤트 사용 방법

컴포넌트에 이벤트 핸들러 함수를 바인딩합니다.

예를 들어 바인드탭(bindtap)의 경우 사용자가 해당 컴포넌트를 클릭하면 해당 페이지의 해당 페이지에서 해당 이벤트 처리 기능을 찾아볼 수 있습니다.

f11353dad4d7245f5bf6914af9e3c837 나를 클릭하세요! de5f4c1163741e920c998275338d29b2

해당 페이지 정의를 작성하세요. 이벤트 처리 함수의 경우 매개변수는 event입니다.

Page({  
 tapName: function(event) {  
 console.log(event)  
 }  
})

로그 정보는 대략 다음과 같은 것을 알 수 있습니다

{
"type": "tap",
"timeStamp": 1252,
"target": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"currentTarget": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"touches": [{
 "pageX": 30,
 "pageY": 12,
 "clientX": 30,
 "clientY": 12,
 "screenX": 112,
 "screenY": 151
}],
"detail": {
 "x": 30,
 "y": 12
}
}

이벤트 상세 설명

이벤트 분류

이벤트는 버블링 이벤트와 비버블링 이벤트

1. 버블링 이벤트: 컴포넌트에서 이벤트가 트리거되면 해당 이벤트가 상위 노드로 전달됩니다.

2. 버블링되지 않는 이벤트: 구성 요소에서 이벤트가 트리거되면 해당 이벤트가 상위 노드로 전달되지 않습니다.

WXML 버블링 이벤트 목록:

유형 트리거 조건

touchstart 손가락 터치

touchmove 터치 후 손가락 이동

touchcancel 전화 수신 알림, 팝업창 등 손가락 터치 동작이 중단되는 경우

touchend 손가락 터치 동작 종료

손가락 터치 후 나가기, 350ms 이상 경과 후 나가기

참고: 위 표 외에도 e8b36d49ce73ede15e584e9dd86e79e9의 제출 이벤트와 0f0306f9b187f2e363126bc29c8b1420의 스크롤 이벤트와 같은 다른 구성요소 사용자 정의 이벤트는 버블링되지 않는 이벤트입니다. f22ed720d2ae070222ab6f087b345d61 (자세한 내용은 각 컴포넌트 참조)

이벤트 바인딩

이벤트 바인딩은 컴포넌트의 속성과 동일한 방식으로 키와 값의 형태로 작성됩니다. .

키는 바인드 또는 캐치로 시작하고 그 뒤에는 바인드탭, 캐치터치스타트와 같은 이벤트 유형이 옵니다.

값은 문자열이며 동일한 이름의 함수는 해당 항목에 정의되어야 합니다. 페이지. 그렇지 않으면 이벤트가 트리거될 때 오류가 보고됩니다.

바인드 이벤트 바인딩은 버블링 이벤트가 위쪽으로 버블링되는 것을 방지하지 않으며, 캐치 이벤트 바인딩은 버블링 이벤트가 위쪽으로 버블링되는 것을 방지합니다.

아래 예에서와 같이 내부 뷰를 클릭하면 handlerTap1 및 handlerTap2가 연속적으로 트리거됩니다(탭 이벤트가 중간 뷰까지 버블링되고 중간 뷰는 탭 이벤트 버블링을 방지하고 더 이상 버블링되지 않기 때문입니다). 상위 노드로 전달됨) 중간 뷰를 클릭하면 handlerTap2가 트리거되고 외부 뷰를 클릭하면 handlerTap1이 트리거됩니다.

<view id="outter" bindtap="handleTap1">  
 outer view  
 <view id="middle" catchtap="handleTap2">  
 middle view  
 <view id="inner" bindtap="handleTap3">  
  inner view  
 </view>  
 </view>  
</view>

이벤트 객체

달리 지정하지 않는 한, 구성 요소가 이벤트를 트리거할 때 로직 레이어에 의해 이벤트에 바인딩된 핸들러 함수는 이벤트 객체를 수신합니다.

이벤트 객체의 속성 목록:

속성 유형 설명

type String 이벤트 유형

timeStamp Integer 이벤트가 생성된 타임스탬프

target Object 이벤트를 발생시킨 컴포넌트의 일부 속성값 모음

currentTarget Object 현재 컴포넌트의 일부 속성값 모음

touches Array 배열 터치 이벤트, 터치 포인트 정보

detail Object 추가 정보

공통 이벤트 유형

timeStamp

페이지가 열린 후 경과된 밀리초 수 이벤트가 트리거될 때까지.

target

이벤트를 트리거하는 소스 구성 요소입니다.



속성 설명

id 이벤트 소스 구성 요소의 ID

dataset 이벤트 소스 구성 요소에서 data-로 시작하는 사용자 정의 속성 모음

offsetLeft, offsetTop 이벤트 소스 구성 요소의 좌표계 오프셋

currentTarget

이벤트가 바인딩된 현재 구성 요소입니다.



속성 설명

id 현재 구성 요소의 ID

dataset 현재 구성 요소에서 data-로 시작하는 사용자 정의 속성 모음

offsetLeft, offsetTop 현재 컴포넌트의 좌표계 오프셋

설명: target 및 currentTarget은 위의 예를 참조할 수 있습니다. 내부 뷰를 클릭하면 handlerTap3에서 수신한 이벤트 개체 target 및 currentTarget이 표시됩니다. 모두 inner이고, HandleTap2가 받은 이벤트 객체 대상은 inner이고, currentTarget은 middle

dataset

입니다. 데이터는 컴포넌트에서 정의할 수 있으며, 이 데이터는 SERVICE를 통해 전달됩니다. 이벤트. 작성 방법: data-부터 시작하여 여러 단어가 하이픈-으로 연결되며, 대문자를 포함할 수 없습니다(대문자는 자동으로 소문자로 변환됩니다). 예를 들어 data-element-type에서는 하이픈이 카멜 케이스로 변환됩니다. event.target.dataset 요소 유형.

예:

c85cc59a4b1d845e1ce84ca0f19d5da7 데이터 세트 테스트 de5f4c1163741e920c998275338d29b2

Page({  
 bindViewTap:function(event){  
 event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法  
 event.target.dataset.alphabeta == 2 // 大写会转为小写  
 }  
})

touches

touches是一个触摸点的数组，每个触摸点包括以下属性：

      属性                     说明

pageX,pageY    距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴    

clientX,clientY    距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴    

screenX,screenY    距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴    

特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

以上就是微信小程序 教程之事件的内容，更多相关内容请关注PHP中文网（www.php.cn）！