for循环内绑定事件的问题(立即执行与延迟执行)。

最新推荐文章于 2024-09-06 22:44:32 发布

Spotlight_mar

最新推荐文章于 2024-09-06 22:44:32 发布

阅读量3.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Spotlight_mar/article/details/52733343

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

通过捕获类或标签名获得节点数组，通过for循环内嵌一个事件监听，判断我点击的是哪个节点区域，执行对应函数。
涉及到for循环的立即执行和绑定函数的延迟执行问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>点击不同区域</title>
    <style type="text/css">
        .container{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">container1</div>
    <div class="container">container2</div>

    <script type="text/javascript">
        var container = document.getElementsByClassName("container");
        console.log(container.length);          //2
        for (var i = 0; i < container.length; i++) {
            container[i].onmouseup = function(){
                console.log(i)                  //2 (for循环内，不是应该0或1吗)
            }
        }
    </script>
</body>
</html>

分析：for循环内，i=0 和 i=1 时都绑定了一个事件函数。绑定的事件处理程序需要外部触发，不会立即执行，而是延迟执行。而for循环是立即执行。当i=2时跳出循环。而在事件触发后，函数内部调用变量i，而此时函数内部没定义i，也没传参数，所以根据javascript规则，就近原则查找i，即跳出循环时的2。（或者报错未定义变量）。
顺序：for循环绑定两个事件—-i=2跳出循环—-事件执行，输出2.

解决方法：
外套一层函数，设计到闭包。

var container = document.getElementsByClassName("container"); 
        console.log(container.length);          //2
        for (var i = 0; i < container.length; i++) {
            container[i].onmouseup = (function (i) {
                return function () {
                    console.log(container)
                    console.log(i)             
                }
            })(i)
        }