<i id='MfYGS'><tr id='MfYGS'><dt id='MfYGS'><q id='MfYGS'><span id='MfYGS'><b id='MfYGS'><form id='MfYGS'><ins id='MfYGS'></ins><ul id='MfYGS'></ul><sub id='MfYGS'></sub></form><legend id='MfYGS'></legend><bdo id='MfYGS'><pre id='MfYGS'><center id='MfYGS'></center></pre></bdo></b><th id='MfYGS'></th></span></q></dt></tr></i><div id='MfYGS'><tfoot id='MfYGS'></tfoot><dl id='MfYGS'><fieldset id='MfYGS'></fieldset></dl></div>

      <small id='MfYGS'></small><noframes id='MfYGS'>

    1. <legend id='MfYGS'><style id='MfYGS'><dir id='MfYGS'><q id='MfYGS'></q></dir></style></legend>
        <bdo id='MfYGS'></bdo><ul id='MfYGS'></ul>
    2. <tfoot id='MfYGS'></tfoot>

      JavaScript在for循环中绑定事件解决事件参数不同的情况

      时间:2023-12-10
        <i id='JEnY1'><tr id='JEnY1'><dt id='JEnY1'><q id='JEnY1'><span id='JEnY1'><b id='JEnY1'><form id='JEnY1'><ins id='JEnY1'></ins><ul id='JEnY1'></ul><sub id='JEnY1'></sub></form><legend id='JEnY1'></legend><bdo id='JEnY1'><pre id='JEnY1'><center id='JEnY1'></center></pre></bdo></b><th id='JEnY1'></th></span></q></dt></tr></i><div id='JEnY1'><tfoot id='JEnY1'></tfoot><dl id='JEnY1'><fieldset id='JEnY1'></fieldset></dl></div>
            <tbody id='JEnY1'></tbody>

        • <legend id='JEnY1'><style id='JEnY1'><dir id='JEnY1'><q id='JEnY1'></q></dir></style></legend>

            <small id='JEnY1'></small><noframes id='JEnY1'>

            • <bdo id='JEnY1'></bdo><ul id='JEnY1'></ul>

                <tfoot id='JEnY1'></tfoot>
              1. JavaScript 在 for 循环中绑定事件时,通常会遇到事件参数不同的情况,这种情况下,如果不加以处理,则会导致事件回调出错或者引起内存泄漏等问题。解决该问题的方法是通过使用闭包和立即执行函数表达式,来给事件参数绑定上恰当的值。下面是具体的攻略:

                1. 通过立即执行函数表达式给事件参数绑定上值

                通过立即执行函数表达式可以在每次迭代时创建一个新的作用域,借此来避免事件参数共享问题。例如,我们要在循环中给多个按钮绑定点击事件:

                for (var i = 0; i < 3; i++) {
                  var btn = document.createElement('button');
                  document.body.appendChild(btn);
                  (function(i) {
                    btn.addEventListener('click', function() {
                      console.log('button ' + i + ' clicked');
                    });
                  })(i);
                }
                

                在上面的例子中,我们对于每个按钮都创建了一个新的作用域,从而可以把当前迭代的 i 值传递给按钮点击事件的回调函数,使得每个按钮点击时输出的信息不同。

                2. 通过绑定属性来避免事件参数共享问题

                可以通过给 DOM 元素绑定属性的方式,在循环内传递参数,避免事件参数共享问题。例如,我们要给多个按钮绑定点击事件,并每个按钮都对应一个 id:

                for (var i = 0; i < 3; i++) {
                  var btn = document.createElement('button');
                  document.body.appendChild(btn);
                  btn.id = 'btn-' + i;
                  btn.addEventListener('click', function() {
                    console.log('button ' + this.id + ' clicked');
                  });
                }
                

                在上面的例子中,我们给每个按钮绑定了一个 id,然后在点击事件的回调函数中,使用 this 关键字来获取当前触发事件的按钮 id,这样就可以避免事件参数共享的问题。

                总之,无论是使用立即执行函数表达式还是绑定属性的方式,都是通过创建一个新的作用域,来解决在 JavaScript 循环中绑定事件出现的参数共享问题。

                上一篇:JS实现PC手机端和嵌入式滑动拼图验证码三种效果 下一篇:python闭包的实例详解

                相关文章

                <legend id='L8Eys'><style id='L8Eys'><dir id='L8Eys'><q id='L8Eys'></q></dir></style></legend>
              2. <tfoot id='L8Eys'></tfoot>
                  <bdo id='L8Eys'></bdo><ul id='L8Eys'></ul>
              3. <i id='L8Eys'><tr id='L8Eys'><dt id='L8Eys'><q id='L8Eys'><span id='L8Eys'><b id='L8Eys'><form id='L8Eys'><ins id='L8Eys'></ins><ul id='L8Eys'></ul><sub id='L8Eys'></sub></form><legend id='L8Eys'></legend><bdo id='L8Eys'><pre id='L8Eys'><center id='L8Eys'></center></pre></bdo></b><th id='L8Eys'></th></span></q></dt></tr></i><div id='L8Eys'><tfoot id='L8Eys'></tfoot><dl id='L8Eys'><fieldset id='L8Eys'></fieldset></dl></div>
              4. <small id='L8Eys'></small><noframes id='L8Eys'>