在我們對(duì)于開發(fā)和各種學(xué)習(xí)中我們都會(huì)使用到不同的自定義方法來(lái)進(jìn)行內(nèi)容和方法的實(shí)現(xiàn)，那么今天小編就來(lái)和大家討論有關(guān)于：“如何在簡(jiǎn)單的解決HTML5自定義屬性問(wèn)題？”這個(gè)問(wèn)題吧！下面是一個(gè)案例分享，希望對(duì)大家有所幫助！
問(wèn)題背景
在頁(yè)面與js傳值中我們經(jīng)常用到data-id="1"的方式，然后通過(guò)e.target.dataset.id取id的值
今天在獲取值時(shí)怎么也取不到
問(wèn)題分析
后來(lái)發(fā)現(xiàn)e對(duì)象有currentTarget和target屬性，而dataset就在currentTarget中，所以通過(guò)e.currentTarget.dataset.id取到了正確的值。
另外data-id="1"最好不要用駝峰命名如：data-Id="1" ，這樣有時(shí)候也取不到值。
HTML5 自定義屬性
網(wǎng)站中經(jīng)常會(huì)看到以data-開頭的屬性定義,雖然W3C不認(rèn)定,但最新HTML5規(guī)定data-是合理的,在HTML5中,任何以data-開始的都是自定義屬性,通常它用來(lái)實(shí)現(xiàn)一些HTML里沒(méi)有明確定義的元素,把用戶自定義的屬性應(yīng)用到代碼中
微信小程序文檔
什么是事件
事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。
事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。
事件的使用方式
在組件中綁定一個(gè)事件處理函數(shù)。
如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁(yè)面對(duì)應(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出來(lái)的信息大致如下：
{
"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)事件
總結(jié)
那么小編辛苦的這么久終于把對(duì)于：“如何在簡(jiǎn)單的解決HTML5自定義屬性問(wèn)題？”這個(gè)問(wèn)題做好的講解，那么更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)！
