事件循环绑定的问题

260 阅读1分钟

例题:

<body>
    <div id="btnBox">
        <input type="button" value="button_1" />
        <input type="button" value="button_2" />
        <input type="button" value="button_3" />
        <input type="button" value="button_4" />
        <input type="button" value="button_5" />
    </div>
    </html>
<script>
    var btnBox=document.getElementById('btnBox'),
        inputs=btnBox.getElementsByTagName('input');
</script>

let的方法:

 for(let i=0;i<l;i++){
      inputs[i].onclick=function(){
            alert(i);
         }
 }
 块级作用域起作用

自定义属性的方式

for(var i = 0; i < inputs.length; i++){
inputs[i].qqq = i; // 当i=0时,给第一个input增加一个自定义属性,对应的值 是 当前索引;
inputs[i].onclick=function(){
    console.log(this);
    alert(this.qqq);
使用自定义属性,思想在于 把 索引 存储到  对应元素的自身上
当i=0时,给第一个input增加一个自定义属性,对应的值 是 当前索引
}

闭包的方式

第一种方式
 for(var i = 0; i < l; i++){
    (function(n){
     inputs[n].onclick = function(){
             alert(n);
         }
     })(i) 
 }
 
 第二种方式
 for(var i=0; i< l; i++){
        inputs[i].onclick = (function(n){
            return function(){
                console.log(n)
            }
        })(i)
        
第三种方式
 function fn(n){
        return function () {
            console.log(n)
        }
    }
    for(var i=0; i < l; i++){
        inputs[i].onclick = fn(i)
    }
闭包:闭包是一个私有变量的保护机制; 闭包是个变量的保护机制,保护私有变量不受外界的污染