JavaScript 關於value的知識點

標籤：logs   val   cli   href   color   tps   div   測試   沒有   

JavaScript中的value既是屬性也是變數

  【1】以下這種情況是常見情況，會彈出“測試內容”

<input type="button" value ="測試內容" onclick = "alert(value)">

  【2】心想，這種情況下value找不到，沿著範圍鏈應該到document了，應該彈出“123”，但情況是彈出空

<script>  var value = 123;</script><input type="button" onclick = "alert(value)">

  【3】value確實是找不到嗎？是找得到的。在調試工具下，查看了this的屬性，裡面有一條是‘value: ""‘。它的值就是空。

<input type="button" onclick = "console.log(this)">

   【4】所以value作為input的屬性一直存在，不存在找不到的情況，賦值了value就是被賦的值，沒賦值value就是空

   【5】看一例拓展，value偽裝兄弟val。val先在input對象上找，沒有找到，沿著範圍鏈在document對象上找，找到彈出123,此處val=123被寫在前面，而是後面，都能訪問到，因為onclick只是事件綁定，等事件真正發生的時候頁面早就解析了後面var val = 123的代碼了。所以不會出錯。

<script>var val = 123;</script><input type="button" onclick = "console.log(val)">

//<script>
//var val = 123;
//</script>

    【6】是這樣嗎？但其實吧聲明放在後面是不靠譜的，如果之間還有其他<script>代碼，由於網路原因無法訪問到,由於<script>有阻塞作用，會阻塞後面代碼，會報錯

<input type="button" onclick = "alert(val)"><script src="http://www.qq.com/test.js"></script><script>var val=123;</script>

    【7】最後一個拓展。如果是一個表單元素，則它的範圍鏈是this->this.form->document。先從<input type="button">對象中尋找username屬性，發現沒有。然後找到它的父級form，form的username可以找到<input type="text">元素(表單元素可以直接通過name值訪問)，然後找到其value值123彈出

<form action="#">  <input type="text" name="username" value="123">  <input type="button" value="btn" onclick="alert(username.value)"></form>

 

轉載出處：小火柴的藍色理想

 

JavaScript 關於value的知識點