Javascript事件绑定的一个坑

最新推荐文章于 2024-11-08 16:09:18 发布

六个九十度

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量400

点赞数

分类专栏： Web前端文章标签： javascript 闭包

本文链接：https://blog.csdn.net/happen23/article/details/78239804

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS支持在函数内定义函数，内部函数可以访问外部函数的局部变量，但访问时机的不同，会导致结果的不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
  <script type="application/javascript">
$(document).ready(function () {
  var level = 0;
  for (var i = 0; i < $("#tab").children.length; i++){
    if (level == 0){
      $("#row" + i).on("click", function () {
        $(this).children().eq(0).text("" + i);
      });
    }else if (level == 1){
      $("#row"+i).on("click", i, function (event) {
        $(this).children().eq(0).text(""+event.data);
      });
    }
  }
});
  </script>
</head>
<body>
<table id="tab">
  <tr id="row0"><td>row0</td></tr>
  <tr id="row1"><td>row1</td></tr>
</table>
</body>
</html>

鼠标点击表格前，页面是这样的

level==0 时，内部函数定义没有绑定i的值，执行时从闭包获取i为2

level==1时，内部函数定义时绑定了i的值，执行时不从闭包获取值

JavaScript的函数是第一类对象，所以函数的定义也是可以在运行时进行的，这就造成函数的定义和函数的运行很可能在时间上有间隔，定义时闭包等上下文信息在执行时可能已发生变化。
另外，大家可以看看这篇文章的典型误区一节，可以加深理解