1. 程式人生 > >HTML元素的專用傳參數據屬性

HTML元素的專用傳參數據屬性

原生 oid color html5 兩個 參考 高精 兼容 ice

把參數直接放到事件定義裏面,類似下面這樣,也是可以,但是這樣不夠Nice.

<a href="javascript:void(0)" onclick="clickhandler(arg1)">點擊</a> 

上面這種方法有著這樣那樣的限制,比如在服務器端生成這段代碼時,arg1的生成又要用‘單引號包裹,如果在客戶端視圖模板中生成上面這個代碼,有可能完全失敗,比如在目前的AngualrJS產品版本中。於是乎有了下面這樣的做法:

<a href="javascript:void(0)" text="arg1" onclick="clickhandler(event)"
>點擊</a>

上面這種方法在事件處理函數中的到event的target,再讀取屬性就可以得到text屬性值了,我也記不清楚我從那本書看到的text傳參這種做法,同樣起相同作用的屬性好像也沒幾個。這種做法有兩個問題:1、參數多的情況下,屬性不夠用;2、text這樣的原生屬性命名有點糊裏糊塗。今天碰到多參傳值的情況下,看了一下JS權威指南後面的附錄參考,發現在HTML5中專門開辟了這麽一個屬性集叫data-set,於是乎像下面這樣定義:

<a href="javascript:void(0)" data-argname="arg1" onclick
="clickhandler(event)">點擊</a>

當然還可以定義更多的參數,這個HTML5屬性不算高精尖屬性,加個HTML5的那個兼容腳本,應該就可以在舊版瀏覽器上用。

HTML元素的專用傳參數據屬性