事件循環綁定的問題

時間 2019-11-24 標籤事件循環綁定問題

例題：html

<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的方法：bash

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增長一個自定義屬性，對應的值 是 當前索引
}
複製代碼

閉包的方式ui

第一種方式
 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)
    }
閉包：閉包是一個私有變量的保護機制； 閉包是個變量的保護機制，保護私有變量不受外界的污染
複製代碼