循环绑定事件

最新推荐文章于 2023-02-24 14:49:03 发布

喵喵程序媛

最新推荐文章于 2023-02-24 14:49:03 发布

阅读量234

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_47067248/article/details/107620565

版权

点击进行隔行换色，发现在for循环下添加点击事件，会走完for循环再进行异步事件处理。两种解决方法：
1.使用立即执行函数
好处：保留函数变量，创建一个独立空间。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var colors = ["#f00", "#f9a", "#ff0", "#f0f", "#0ff"];
        var lis = document.querySelector('ul').children;

        for (var i = 0; i < lis.length; i++) {
            (function (i) {
                lis[i].onclick = function () {
                    this.style.backgroundColor = colors[i];
                }

            }(i))
        }

2.JS闭包

基本数据类型作为参数传递在函数体内部会创建一个副本

for (var i = 0; i < lis.length; i++) {
    // 基本数据类型作为参数传递 在函数体内部 会创建一个副本
    // js闭包
    lis[i].onclick = (function (index) {
        return function () {
            console.log(index);
            lis[index].style.backgroundColor = colors[index]
        }
    })(i)

}
console.log('i', i)

3.直接改成this指代，下文顺便提下自定义属性

 <ul>
        <li data-index="0" data-color="red">
            1
        </li>
        <li data-index="1" data-color="blue">
            2
        </li>
        <li data-index="2" data-color="yellow">
            3
        </li>
        <li data-index="3" data-color="gray">
            4
        </li>
        <li data-index="4" data-color="pink">
            5
        </li>
    </ul>

   <script>
        var lis = document.querySelectorAll('li');
        for(var i = 0;i<lis.length;i++){
        lis[i].onclick = function(){
            var color = this.dataset['color'];
           this.style.color = color;
            console.log(this.dataset['index']);
        }
    }
    </script>

喵喵程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
循环绑定事件

点击进行隔行换色，发现在for循环下添加点击事件，会走完for循环再进行异步事件处理。两种解决方法：1.使用立即执行函数好处：保留函数变量，创建一个独立空间。<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5&lt
复制链接

扫一扫