今天在学习input的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

<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>

javascript中关于value的一个小知识点(value既是属性也是变量)的更多相关文章

  1. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  2. 【前端】javascript中10常用的个小技巧总结

    javascript中10常用的个小技巧总结 本文转自:http://www.cnblogs.com/libin-1/p/6756393.html 1. new Set() 可能有人知道ES6中提供了 ...

  3. post提交与get提交的一个小知识点

    今天偶然发现post提交与get提交的一个小知识点,记下来以后可以看看. 将form表单的method的设置为get后,通过url传递的参数将不会被传递到服务器,例如1.ashx?a=123,的a=1 ...

  4. linux下开发,解决cocos2d-x中编译出现的一个小问题, undefined reference to symbol &#39;pthread_create@@GLIBC_2.2.5&#39;

    解决cocos2d-x中编译出现的一个小问题 对于cocos2d-x 2.×中编译中,若头文件里引入了#include "cocos-ext.h",在进行C++编译的时候会遇到例如 ...

  5. JavaScript中函数作为另一个函数的参数的时候它存在于哪个作用域

    一直对函数作为参数被传递进另外一个函数理解的不是很清除.先看下这段代码吧: function test(fn){ var bar = 1; fn(); } var bar = 99; test(fun ...

  6. Javascript中window.opener的一点小总结

    以前一直认为window.opener只有在window.open方法打开下的窗口才可以访问,没想到即使是a链接打开的页面的照样可以访问.window.opener指向父窗口,也就是来源窗口.可以利用 ...

  7. MongoDB中对象反序列化的一个小问题

    今天在mongoDB存取对象数据的时候,碰到一个小问题:对象的某一个字段类型是抽象类或者接口.在存入的时候没有问题.可是在读取的时候,因为没有详细类的信息,无法完毕对象的又一次构建.就会报错: Can ...

  8. JavaScript中sort方法的一个坑(leetcode 179. Largest Number)

    在做 Largest Number 这道题之前,我对 sort 方法的用法是非常自信的.我很清楚不传比较因子的排序会根据元素字典序(字符串的UNICODE码位点)来排,如果要根据大小排序,需要传入一个 ...

  9. 一些JavaScript中的DOM的优化小技巧

    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...

随机推荐

  1. falcon常用参数解析

    CPU.xxx cpu.idle cpu.idle表示除硬盘IO等待时间以外其它等待时间,这个值越大,表示cpu越空闲,还可以执行更多的任务,反之亦然,此处我们falcon展示的是idle的波动情况, ...

  2. AI 可视化

    可视化 参考链接: http://www.tensorfly.cn/tfdoc/how_tos/summaries_and_tensorboard.html

  3. Java NIO1:浅谈I/O模型

    一.什么是同步?什么是异步? 同步和异步的概念出来已经很久了,网上有关同步和异步的说法也有很多.以下是我个人的理解: 同步就是:如果有多个任务或者事件要发生,这些任务或者事件必须逐个地进行,一个事件或 ...

  4. Linux:CentOS7.4新建用户并授权

    之前买了一台阿里云服务器,准备用来搭建一些服务,由于使用root用户登录进行操作比较敏感,就新建了一个用户,用来登录并进行日常操作. 这篇博客,介绍下centos7.4下如何新建用户并且授权... 一 ...

  5. Debug Hacks中文版——深入调试的技术和工具

    关键词:gdb.strace.kprobe.uprobe.objdump.meminfo.valgrind.backtrace等. <Debugs Hacks中文版——深入调试的技术和工具> ...

  6. Vue-比较方法、计算属性和侦听器

    分别用方法.计算属性和侦听器实现当fristName和lastName改变时,fullName跟着改变. 一.方法: html: <div id="app"> {{fu ...

  7. JS中AOP的实现和运用

    在编写js的时候,我们有时会遇到针对某种场景做处理,比如在方法开始的时候校验参数,执行方法前检查权限,或是删除前给出确认提示等等.这些校验方法.权限检测.确认提示,规则可能都是相同的,在每个方法前去调 ...

  8. 深入理解[Future模式]原理与技术

    1.Future模式 Future模式和多线程技术密切相关,可以说是利用多线程技术优化程序的一个实例. 在程序设计中,当某一段程序提交了一个请求,期望得到一个答复.但非常不幸的是,服务程序对这个请求的 ...

  9. 单点登录SSO:概述与示例

    目录 概述 演示一:零改造实施单点登录 演示二: 单点注销 演示三:集成AD认证 演示四:客户端单点登录 演示五:移动端单点登录 单点登录SSO概述 本系列将由浅入深的,带大家掌握最新单点登录SSO方 ...

  10. tomcat7 内存溢出 java.lang.OutOfMemoryError 处理方法

    找到tomcat的安装目录,在  tomcat安装目录/bin/catalina.sh最上面添加: JAVA_OPTS="-server -Xms800m -Xmx800m -XX:Perm ...