미니 프로그램 개발 기초 이벤트 (9)

앞서 언급했듯이 WeChat 애플릿 프레임워크는 로직 레이어와 UI 레이어를 분석하는 설계 방식입니다. 이 설계 방식은 두 가지 문제를 해결해야 합니다.

UI 레이어는 로직의 변화에 ​​반응합니다.
UI 레이어는 사용자의 작업을 로직 레이어에 피드백합니다

앞서 언급한 데이터 바인딩은 첫 번째 문제를 해결하며, 이벤트 그럼 두 번째 문제를 풀어보세요

이벤트란 무엇인가요
이벤트는 뷰 레이어에서 로직 레이어로의 통신 방식입니다.
이벤트는 처리를 위해 사용자 행동을 논리 계층에 피드백할 수 있습니다.
이벤트는 구성 요소에 바인딩될 수 있으며, 트리거 이벤트에 도달하면 논리 레이어의 해당 이벤트 처리 기능이 실행됩니다.
이벤트 객체는 ID, 데이터세트, 터치와 같은 추가 정보를 전달할 수 있습니다.

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

이벤트 바인딩

은 이벤트 바인딩을 사용하여 사용자 작업에 대한 응답을 완료합니다. 예를 들어 view 태그의 tap 이벤트를 처리하려면 을 추가한 다음 .js에 bindtap = 'tapName' 함수를 추가합니다. tapName

//wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

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

대상: 이벤트를 트리거한 구성 요소
currentTarget: 현재 구성요소
type: 이벤트 유형
timeStamp: timestamp(페이지가 열린 후 경과된 밀리초 수) 이벤트가 발생한 시점까지)
touches: 터치 포인트를 포함하는 배열(멀티터치)
changedTouches: 변경된 터치 포인트의 배열(멀티터치)
세부정보: 추가 맞춤 정보

target과 < 사이에 차이가 있는 이유는 무엇인가요? 🎜>currentTarget 이벤트가 버블 이벤트와 버블이 아닌 이벤트

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

이벤트는 버블링 이벤트입니다(이것이 위 예의 event에 currentTarget이 포함된 이유입니다). 버블링 이벤트에는 | 트리거 조건|| -------------|
| 손가락 터치 동작 시작
| 터치 후 손가락 이동 | 터치 취소 | 전화 수신 알림 등 손가락 터치 종료 | 터치 액션 종료 |
| 탭 | 손가락 터치 후 바로 나가기|
| 손가락 터치 후 350ms 이상 경과 후 나가기|

버블링 이벤트가 필요한 이유는 무엇입니까?

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

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

이벤트 버블링 방지

어떤 경우에는

과 같은

을 사용할 수 있습니다. , 이벤트의 버블링 동작을 방지할 수 있습니다. 다음 코드 예제를 사용하면 버블링 이벤트에 대한 이해를 높일 수 있습니다.

//.wxml
<view id="outter" bindtap="handleTapOutter">
  我是父亲节点
  <view id="middle" catchtap="handleTapMiddle">
    我是儿子节点
    <view id="inner" bindtap="handleInner">
      我是孙子节点
    </view>
  </view>
</view>

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