HTML5 カスタム属性の問題分析

ページと JS の間で値を転送する場合、data-id=1 を使用して、 e.target.dataset.idを通じて id の値を取得することがよくあります。

今日は値を取得しても値を取得できません

その後、 e オブジェクトには currentTarget 属性と target 属性があり、データセットは currentTarget にあるため、正しい値はe.currentTarget.dataset.idを通じて取得されることがわかりました。

また、 data-id=1 は、 data-Id=1のようなキャメルケースの名前付けを使用しないことをお勧めします。そのため、値が取得できない場合があります。

Web サイトでは data- で始まる属性定義がよく見られますが、W3C では認識されていませんが、HTML5 では data- で始まるものはすべてカスタム属性であると規定されており、通常はこれを実装するために使用されます。 HTML で明確に定義されていない一部の要素は、ユーザー定義の属性をコードに適用します。

イベントは、ビュー層からロジック層への通信方法です。

イベントは、ユーザーの行動をロジック層にフィードバックして処理できます。

イベントはコンポーネントにバインドでき、トリガー イベントに達すると、ロジック層の対応するイベント処理関数が実行されます。

イベント オブジェクトには、ID、データセット、タッチなどの追加情報を含めることができます。

イベント ハンドラーをコンポーネントにバインドします。

たとえば、bindtap では、ユーザーがコンポーネントをクリックすると、対応するイベント処理関数がページの対応するページで見つかります。

 <view id=tapTest data-hi=WeChat bindingtap=tapName> クリックしてください </view>

対応するページ定義に対応するイベント処理関数を記述します。パラメータはeventです。

 Page({ タップ名: 関数(イベント) { console.log(イベント) }})

ログアウトされた情報はおおよそ次のとおりであることがわかります。

 { type:tap、timeStamp:895、ターゲット: { id: TapTest、データセット: { hi:WeChat } }、currentTarget: { id: TapTest、データセット: { hi:WeChat } }、詳細: { x:53、y: 14 }、タッチ:[{ 識別子:0, ページX:53, ページY:14, クライアントX:53, クライアントY:14 }], ChangeTouches:[{ 識別子:0, ページ X:53, ページ Y:14, クライアント X:53, クライアント Y:14 }]}

WXS 関数を使用してイベントに応答する

上記は、編集者によって紹介された HTML5 カスタム属性の問題分析です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！

この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。