HTML5自定義屬性問題怎么解決

本文小編為大家詳細(xì)介紹“HTML5自定義屬性問題怎么解決”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“HTML5自定義屬性問題怎么解決”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

問題背景

在頁面與js傳值中我們經(jīng)常用到data-id="1"的方式，然后通過e.target.dataset.id取id的值

今天在獲取值時怎么也取不到

問題分析

后來發(fā)現(xiàn)e對象有currentTarget和target屬性，而dataset就在currentTarget中，所以通過e.currentTarget.dataset.id取到了正確的值。

另外data-id="1"最好不要用駝峰命名如：data-Id="1" ，這樣有時候也取不到值。

HTML5 自定義屬性

網(wǎng)站中經(jīng)常會看到以data-開頭的屬性定義,雖然W3C不認(rèn)定,但最新HTML5規(guī)定data-是合理的,在HTML5中,任何以data-開始的都是自定義屬性,通常它用來實(shí)現(xiàn)一些HTML里沒有明確定義的元素,把用戶自定義的屬性應(yīng)用到代碼中

微信小程序文檔

什么是事件

事件是視圖層到邏輯層的通訊方式。

事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。

事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。

事件對象可以攜帶額外信息，如 id, dataset, touches。

事件的使用方式

在組件中綁定一個事件處理函數(shù)。

如bindtap，當(dāng)用戶點(diǎn)擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

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

在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是event。

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

可以看到log出來的信息大致如下：

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"WeChat"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

使用WXS函數(shù)響應(yīng)事件

讀到這里，這篇“HTML5自定義屬性問題怎么解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。