js中用for循环事件绑定的小问题

Posted greatfish

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中用for循环事件绑定的小问题相关的知识，希望对你有一定的参考价值。

在js中，如果用for循环进行事件绑定，可能会遇到一点小问题，看下面第一个示例，无论点击哪个div，都会弹出3，即length。

因为这相当于事件绑定的同时，并没有把所对应的i进行一起绑定，i的值是最后一个值，即3。

示例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 3px;
        }
    </style>
    <script>
        window.onload = function () {
            var add_the_handlers = function (nodes) {
                var i;
                for (i = 0; i < nodes.length; i++) {
                    nodes[i].onclick = function (e) {
                        alert(i);
                    };
                }
            };
            var divs = document.getElementsByTagName(‘div‘);
            add_the_handlers(divs);
        }
    </script>

    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>

</html>

再看下面两个例子，通过事件绑定的同时，通过函数调用而不是函数定义进行i与事件的绑定。

示例2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin-bottom: 3px;
    }
</style>
<script>
    window.onload = function () {
        var add_the_handlers = function (nodes) {

            var helper = function (index) {
                return function (e) {
                    alert(index);
                };
            };

            var i;
            for (i = 0; i < nodes.length; i++) {
                nodes[i].onclick = helper(i);
            }
        };
        var divs = document.getElementsByTagName(‘div‘);
        add_the_handlers(divs);
    }
</script>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

 

示例3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 3px;
        }
    </style>
    <script>
        window.onload = function () {
            var add_the_handlers = function (nodes) {
                var i;
                for (i = 0; i < nodes.length; i++) {
                    (function (i) {
                        nodes[i].onclick = function () {
                            alert(i);
                        };
                    })(i);
                }
            };
            var divs = document.getElementsByTagName(‘div‘);
            add_the_handlers(divs);
        }
    </script>

    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>

</html>

 

以上是关于js中用for循环事件绑定的小问题的主要内容，如果未能解决你的问题，请参考以下文章

原生js如何绑定a连接点击事件？

JavaScript for循环不重复绑定点击事件

js循环点击div事件

js，for循环，可以往里面添加函数，和事件吗？

js作用域for循环闭包问题

JS操作