미니 프로그램 개발에는 어떤 이벤트가 있나요?

WeChat 미니 프로그램 개발에는 어떤 이벤트가 있나요? 이벤트의 정의에서 이벤트는 뷰 계층에서 논리 계층으로의 통신 방법입니다. 이벤트는 처리를 위해 사용자 행동을 논리 계층에 피드백할 수 있으며, 트리거 이벤트에 도달하면 논리 계층의 해당 이벤트 처리 기능이 실행됩니다. 또한 이벤트 개체는 ID, 데이터 세트, 터치와 같은 추가 정보를 전달할 수 있습니다.

WeChat 애플릿 프레임워크는 로직 레이어와 UI 레이어 분석의 설계 방법을 채택하기 때문에 이 디자인 방법은 두 가지 문제를 해결해야 합니다. 뷰 레이어는 로직 레이어의 로직과 데이터의 변화에 ​​응답하고, 뷰 레이어는 사용자의 작업을 논리 계층에 피드백합니다. WeChat은 개발자가 뷰 계층과 논리 계층을 연결하는 데 도움이 되는 몇 가지 구문과 규칙을 정의합니다. 전자의 문제는 데이터 바인딩을 통해 해결할 수 있고, 두 번째 문제는 이벤트를 통해 해결해야 합니다.

이벤트 바인딩

이벤트 바인딩을 통해 사용자 작업에 대한 응답을 완료합니다. 예를 들어 뷰 태그의 탭 이벤트를 처리하려면 태그 속성에 findtap = 'tapName'을 추가한 다음 에 tapName 함수를 추가합니다. js

//wxml
Click me!
//.js
Page({
tapName:function(event) {
console.log(event)
}
})

event 개체에는 이벤트에 대한 일부 데이터가 포함되어 있습니다.

target: 이벤트를 트리거한 구성 요소

currentTarget: 현재 구성 요소

type: 이벤트 유형

timeStamp: 타임스탬프(경과된 밀리초 수) 페이지가 열린 시점부터 이벤트가 발생한 시점까지)

touches: 터치 포인트가 포함된 배열(멀티터치)

changedTouches: 변경된 터치 포인트의 배열(멀티터치)

detail: 추가 맞춤 정보

버블링 이벤트 및 버블링되지 않는 이벤트 이벤트

target과 currentTarget이 있는 이유는 이벤트가 버블링 이벤트와 버블링되지 않는 이벤트의 두 가지 범주로 나누어지기 때문입니다.

버블 이벤트: 구성 요소에서 이벤트가 트리거되면 이벤트는 상위 노드로 전달됩니다.

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

탭 이벤트는 버블링 이벤트입니다(이것이 위 예의 이벤트에 currentTarget이 포함된 이유입니다).

버블링 이벤트가 필요한 이유

버블링 이벤트를 사용하면 일부 기능을 더 편리하게 구현할 수 있습니다.

예를 들어, 프로그램에는 사용자의 아바타와 이름이 포함된 보기가 있습니다. 사용자가 아바타나 이름을 클릭하면 사용자 세부정보 페이지로 들어갑니다. 버블링 이벤트가 없으면 아바타와 이름의 클릭 이벤트를 처리해야 합니다. 이제 외부 레이어에 컴포넌트를 래핑하고 해당 컴포넌트의 이벤트를 처리하기만 하면 됩니다.

이벤트 버블링 방지

경우에 따라 이벤트 버블링을 방지하기 위해 catchtap과 같은 catch 이벤트 바인딩을 사용할 수 있습니다.

다음 코드 예제를 사용하면 버블링 이벤트에 대한 이해를 높일 수 있습니다

//.wxml
我是父亲节点
我是儿子节点
我是孙子节点

//.js
Page({
handleTapOutter:function(event) {
console.log(父亲节点被点击)
},
handleTapMiddle:function(event) {
console.log(儿子节点被点击)
},
handleInner:function(event) {
console.log(孙子节点被点击)
},
})

요약하면 이벤트는 발생하는 어떤 일을 의미하며 일반적으로 사용자는 버튼을 클릭하거나 전화기 화면에서 손가락을 슬라이드하는 등의 일부 작업을 수행합니다. 이벤트가 발생하면 프레임워크는 사용자 작업에 응답할 수 있도록 이벤트 처리 함수(있는 경우)를 호출합니다.

이 기사의 출처는 다음과 같습니다: http://zixun.jisuapp.cn/xcxkfjc/3059.html

권장: "Mini 프로그램 개발 튜토리얼"

위 내용은 미니 프로그램 개발에는 어떤 이벤트가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!