分析一段包含闭包的代码段

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_30275415

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangqiideal/p/10180050.html

版权

运行环境：IE6，不支持placeholder属性的浏览器。

HTML：

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.1/jquery.min.js"></script>
<body>
<form>
  <label for="name">用户名：</label>
  <input type="text" placeholder="请输入用户名"/>
  <input type="password" placeholder="请输入密码"/>
</form>
</body>
</html>

JS代码：

$(document).ready(function(){
    //定义判断当前浏览器是否支持placeholder功能
    var supportPH=function(){return "placeholder" in document.createElement("input");};
    var placeholderFn=function(input){
        var text=input.getAttribute("placeholder");
        var wqinput=input;
        var defaultValue=input.value;
        if(defaultValue==""){
            input.value=text;            
        }

        if(input)
        {            
            input.onfocus=function(){
                if(wqinput.value===text)
                wqinput.value="";
            };
            input.onblur=function(){          
                if(wqinput.value==="")
                {
                    wqinput.value=text;
                }
            }
        }
    }
    var Inputs=document.getElementsByTagName("input");  
    if (!supportPH()) {
        for (var i = 0; i < Inputs.length; i++) {
            var input = Inputs[i];
            if(input.getAttribute('type')==="text" || true)
                placeholderFn(input);
        }
    } 
});

此段代码有玄机，你如果看懂了wqinput变量在失去焦点和获得焦点的事件中，都依然保持着第一次赋值时的各个对象的值，并且一直保持着。应该想到此处有闭包现象，实际上也确实使用了闭包，只是不知不觉而已。原因是。input.onfocus和input.onblur绑定了处理方法后，即使离开了函数placeholderFn，由于input对象存在，所以，focus和blur的上下文变量也依然存在。

如果理解的有问题，请留言共同探讨

转载于:https://www.cnblogs.com/wangqiideal/p/10180050.html

weixin_30275415

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分析一段包含闭包的代码段

运行环境：IE6，不支持placeholder属性的浏览器。HTML：<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.1/jquery.min.js"></script><body><form> <label for...
复制链接

扫一扫