js的事件循环绑定和jQuery的隐式迭代

js的事件循环绑定和jQuery的隐式迭代

• js事件循环绑定
• jQuery隐式迭代

---

先举一个例子：给定一个ul，点击列表内的每一个li元素，使它的背景色变红，下边分别用js代码和jQuery实现。

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

js事件循环绑定

var lis = document.getElementsByTagname('li');
for（var i=0；i<lis.length;i++）{
    lis[i].index = i;//添加一个index属性，用来存储i的值
    lis[i].onclick = function(){
        lis[lis[i].index].style.background = "red";
    }
}

如果不添加index属性，当点击li的时候，其实循环已经执行完毕，并没有把每个li绑定对应的事件；加入index之后，将循环时的i值存储起来，接着调用函数，完成事件绑定。

jQuery隐式迭代

$('li').click(function(){
    $(this).css('background','red');
}

我们看到利用jQuery实现上述例子时，只用了几行代码，并没有用到for循环，是因为jQuery中存在隐式迭代，自动为每个数组元素添加了执行方法，点击任何li，对应的li就会调用函数。

转载于:https://www.cnblogs.com/ssnsb/p/7731985.html