HTML5 사용자 정의 속성의 문제 분석

페이지와 js간 값을 전달할 때 data-id=1을 사용하고 e.target.dataset.id 통해 id값을 얻어오는 경우가 많습니다.

오늘은 내가 얻을 때 그 가치를 얻을 수 없습니다

나중에 e 객체에는 currentTarget 및 target 속성이 있고 데이터 세트는 currentTarget에 있으므로 e.currentTarget.dataset.id 통해 올바른 값을 얻는다는 것을 알았습니다.

또한 data-id=1이라는 이름을 지정할 때 data-Id=1 과 같이 낙타 표기법을 사용하지 않는 것이 가장 좋습니다. 그렇지 않으면 때때로 값을 얻지 못할 수도 있습니다.

웹사이트에서는 data-로 시작하는 속성 정의를 보는 것이 일반적입니다. 비록 W3C에서는 이를 인식하지 못하지만 최신 HTML5에서는 data-로 시작하는 모든 것이 합리적이라고 규정하고 있으며 이는 일반적으로 구현에 사용됩니다. HTML에 명확하게 정의되지 않은 일부 요소는 사용자 정의 속성을 코드에 적용합니다.

이벤트는 뷰 계층에서 로직 계층으로의 통신 방법입니다.

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

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

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

이벤트 핸들러를 구성 요소에 바인딩합니다.

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

 <view id=tapTest data-hi=WeChat bintap=tapName> 클릭해주세요! </view>

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

 페이지({ tapName: function(event) { console.log(event) }})

로그아웃된 정보는 대략 다음과 같은 것을 확인할 수 있습니다.

 { 유형:tap, timeStamp:895, 대상: { id: tapTest, 데이터세트: { hi:WeChat } }, currentTarget: { id: tapTest, 데이터세트: { hi:WeChat } }, 세부정보: { x:53, y: 14 }, 터치:[{ 식별자:0, pageX:53, pageY:14, clientX:53, clientY:14 }], 변경된 터치:[{ 식별자:0, pageX:53, pageY:14, clientX:53, clientY:14 }]}

WXS 기능을 사용하여 이벤트에 응답

이상은 에디터가 소개한 HTML5 커스텀 속성의 문제점 분석입니다. 문의사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!