js中关于value的一个小知识点(value既是属性也是变量)
2015-10-01 16:39
645 查看
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻。
【1】以下这种情况是常见情况,会弹出“测试内容”
【2】心想,这种情况下value找不到,沿着作用域链应该到document了,应该弹出“123",但情况是弹出空
【3】value确实是找不到吗?是找的到的。在调试工具下,查看了this的属性,里面有一条是 ‘ value:"" ’ 。它的值就是空
【4】所以value作为input的属性是一直存在的,不存在找不到的情况,赋值了value就是被赋的值,没赋值value就是空。
【5】看一例拓展,value伪装兄弟val。val先在input对象上找,没有找到,沿着作用域链在document对象上找,找到弹出123。
【6】还有就是不论val=123被写在前面,而是后面,都能访问到,因为onclick只是事件绑定,等事件真正发生的时候页面早就解析了后面var val=123的代码了。所以不会出错。
【7】是这样吗?但其实把声明放在后面是不靠谱的,如果之间还有其他<script>代码,由于网络原因无法访问到,由于<script>有阻塞作用,会阻塞后面代码,会报错。
【8】最后一个拓展。如果是一个表单元素,则它的作用域链是 this -> this.form -> document 。先从<input type="button">对象中寻找username属性,发现没有。然后找到它的父级form,form的username可以找到<input type="text">元素(表单元素可以直接通过name值访问),然后找到其value值123后弹出。
【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。
<script> var val=123; </script> <input type="button" onclick = "console.log(val)">
【6】还有就是不论val=123被写在前面,而是后面,都能访问到,因为onclick只是事件绑定,等事件真正发生的时候页面早就解析了后面var val=123的代码了。所以不会出错。
<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>
【8】最后一个拓展。如果是一个表单元素,则它的作用域链是 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>
相关文章推荐
- easyui datagrid加载数据和分页
- UIButton是UIImageView的子控件无法与用户交互
- 显示器 RUIGE瑞鸽高清显示器TL-S1700HD
- 远程调用服务(RPC)和消息(Message Queue)对比及其适用/不适用场合
- UIDynamic-动力效果
- poj(2299)——Ultra-QuickSort(归并排序求逆序数)
- iOS UITextView的使用(小小阅读器实现)
- ZOJ-1649 Rescue
- BlockingQueue
- How do you make Ubuntu accept files sent over bluetooth
- iOS开发之 UIDynamic (动力效果)
- 强连通图之HDU2767 Proving Equivalences
- iOS: 工具栏控件UIToolBar和工具栏按钮控件UIBarButtonItem的使用
- easyui 之 data-option
- iOS开发入门_视图控制器_UI_02
- Android stuido Gradle模式的使用
- SpriteBuilder中子节点的相对位置(%百分比定位)
- SpriteBuilder中子节点的相对位置(%百分比定位)
- SpriteBuilder中子节点的相对位置(%百分比定位)
- easyui 的dialog 的href加载,子页面的document ready事件无效!