當JS拼接HTML放在頁面時,可能會出現JS中事件無反應情況,下面寫法可以避免這個問題
<html>
<header>
<title>JS通過標簽自身屬性獲取屬性值</title>
<script src="jquery-3.1.1.min.js"></script>
</header>
<!-- 這種方式可以處理 JS拼接成的html片段綁定事件 -->
<body>
<input value="inputVal" data-name="李四" data-age="15" onblur="funBlur(this)"/>
<!--注意:在this中取dataset中對應屬性時,名稱必須用全小寫,取標簽自身值時必須用value-->
<input value="inputVal2" data-Name2="張三" data-Age2="18" onblur="funBlur2(this)"/>
<!--使用span標簽 取標簽自身值使用textContent-->
<span data-name="王五" data-age="12" onclick="funClick(this)">spanVal</span>
</body>
<script>
function funBlur(obj)
{
var name = obj.dataset.name;
var age = obj.dataset.age;
var inputVal=obj.value;
console.log("Name:"+name+",Age:"+age+",InputVal:"+inputVal);
//Name:李四,Age:15,InputVal:inputVal
}
//注意:在this中取dataset中對應屬性時,名稱必須用全小寫,取標簽自身值時必須用value
function funBlur2(obj)
{
var name2 = obj.dataset.Name; //undefined
var age2 = obj.dataset.Age; //undefined
var inputVal2=obj.val; //undefined
console.log("Name:"+name2+",Age:"+age2+",InputVal:"+inputVal2);
//Name:undefined,Age:undefined,InputVal:undefined
}
function funClick(obj)
{
var name = obj.dataset.name;
var age = obj.dataset.age;
var spanVal=obj.textContent; //看這里 使用span標簽 取標簽自身值使用textContent
console.log("Name:"+name+",Age:"+age+",spanVal:"+spanVal);
//Name:王五,Age:12,spanVal:spanVal
}
</script>
</html>
從上面可以看出input和span標簽取自身值的方式是不同的,推測其他標簽取自身屬性值時方式也會有所不同,具體情況應具體對待,使用其他標簽時可以使用web瀏覽器調試查看標簽屬性,如Google瀏覽器,F12進入開發着模式,進行斷點調試。