HTML5自訂屬性的問題分析

在頁面與js傳值中我們常用到data-id=1的方式，然後透過e.target.dataset.id取id的值

今天在取得值時怎麼也取不到

後來發現e物件有currentTarget和target屬性，而dataset就在currentTarget中，所以透過e.currentTarget.dataset.id取到了正確的值。

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

網站中經常會看到以data-開頭的屬性定義,雖然W3C不認定,但最新HTML5規定data-是合理的,在HTML5中,任何以data-開始的都是自訂屬性,通常它用來實現一些HTML裡沒有明確定義的元素,把用戶自訂的屬性應用到程式碼中

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

事件可以將使用者的行為回饋到邏輯層進行處理。

事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。

事件物件可以攜帶額外訊息，如id, dataset, touches。

在元件中綁定一個事件處理函數。

如bindtap，當使用者點擊該元件的時候會在該頁面對應的Page中找到對應的事件處理函數。

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

在對應的Page定義中寫上對應的事件處理函數，參數是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函數回應事件

以上所述是小編給大家介紹的HTML5自訂屬性的問題分析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！