JS在for循环中绑定事件的失效问题

问题描述

一个简单的点击案例,我们需要实现通过点击改变按钮的值,
使用for循环去绑定onclick事件,但js绑定失效.

如下图

          var btns = document.getElementsByTagName('input');
          for (var i = 0; i < btns.length; i++) {//for循环遍历每一个input对象
              btns[i].onclick = function () {//为每一个input对象绑定点击事件
                  //将每一个input标签的value值改为girl
                  for (var j = 0; j < btns.length; j++) {
                      btns[j].value = 'girl'
                  }
                  btns[i].value = 'boy'//将当前input标签的value值更改为boy
              }
          }

但是这样并不能得到我们想要的结果
浏览器打开后控制台将会报错:

Uncaught TypeError: Cannot set property ‘value’ of undefined (value未定义)

那为什么会出现这种情况呢
我们走一遍流程

1. for循环为每一个input元素绑定点击事件(仅仅只是绑定,没有执行)
2. 鼠标点击input元素,元素触发点击事件

 btns[i].onclick = function () {//为每一个input对象绑定点击事件
                  //将每一个input标签的value值改为girl
                  for (var j = 0; j < btns.length; j++) {
                      btns[j].value = 'girl'
                  }
                  btns[i].value = 'boy'//将当前input标签的value值更改为boy
              }

但是由于js中仅仅只是绑定了点击事件,并没有执行,

等点击事件执行时,for循环早已结束,

所以此时i的值等于btns数组的长度,也就是6

因此btns[i].value会被认为没有定义.

所以如果想要解决这种点击时”i”值不能相匹配的问题
可以使用下面的方法

1.使用闭包函数.
点击事件绑定函数相当于一个内嵌函数,
在点击事件绑定的时候就把相应”i”值保存在函数中.

for (var i = 0; i < btns.length; i++) {//for循环遍历每一个input对象

   (function(i){//自执行匿名函数,将"i"值保存在函数中(闭包函数原理)

    btns[i].onclick = function () {//为每一个input对象绑定点击事件
        //将每一个input标签的value值改为girl

        for (var j = 0; j < btns.length; j++) {
            btns[j].value = 'girl'
        }
        btns[i].value = 'boy'//将当前input标签的value值更改为boy
    }

   })(i)

}

2.使用this值代替btns[i],直接指代点击事件的当前对象.

for (var i = 0; i < btns.length; i++) {//for循环遍历每一个input对象
    btns[i].onclick = function () {//为每一个input对象绑定点击事件
        //将每一个input标签的value值改为girl
        for (var j = 0; j < btns.length; j++) {
            btns[j].value = 'girl'
        }

        this.value = 'boy'//使用this值指代当前对象
    }
}

3.给btns[i]创建一个自定义属性,用来保存”i”值.
注:这个方法适合只需要在函数内部使用当前对象的”i”值
如果需要使用当前对象就直接使用this关键字.

var btns = document.getElementsByTagName('input');
for (var i = 0; i < btns.length; i++) {//for循环遍历每一个input对象

    btns[i].index=i;//使用自定义属性储存"i"值

    btns[i].onclick = function () {//为每一个input对象绑定点击事件
        //将每一个input标签的value值改为girl
        for (var j = 0; j < btns.length; j++) {
            btns[j].value = 'girl'

        btns[this.index].value = 'boy'//使用自定义属性表示当前对象的"i"值

    }
}