javascript小知識點

標籤：問題   click   console   doc   onclick   查看   賦值   input   其他   

大家對input中的value值研究的透徹麼，今天看到一篇部落格，很神奇  然後研究了一下input中的value值到底對應的是啥值

 

1、input中的value，這是大家在開發中進場遇到的一個問題

<input type="button" value="kester" onclick = "alert(value)">

這種情況下，會彈出測試的彈窗內容為“kester”

 

2、但是在請看一下的一種情況

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

心裡在想，這種情況下value找不到，是不是沿著範圍找到上一層的document，應該彈出“123”，結果是錯誤的，然而彈出來的是一個空值

 

3、value確實是找不到嗎？答案卻否定的。

在調試工具下，查看的this的屬性是有一條記錄的：value：“”，這樣證實了value為空白值，例下代碼

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

 

4、所以，在input中，value是永遠存在的，不存在找不到的情況，賦值了value就是被賦值的值，沒有賦值的value為空白，這個大家都應該清楚的

 

5、舉個例子

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

value的偽裝兄弟是val。val現在input對象上找，沒有找到，沿著範圍在document對象上找，找到彈出123

 

6、不論val=123被寫在前面還後面，都是可以訪問到的，因為這是一個點擊事件，當在出發這個點擊事件的時候，頁面已經解析了js

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

 

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

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

 

javascript小知識點