Javascript事件绑定的一个坑

WEB前端 waitig 400℃ 百度已收录 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==0
level==1时,内部函数定义时绑定了i的值,执行时不从闭包获取值
level==1
JavaScript的函数是第一类对象,所以函数的定义也是可以在运行时进行的,这就造成函数的定义和函数的运行很可能在时间上有间隔,定义时闭包等上下文信息在执行时可能已发生变化。
另外,大家可以看看这篇文章的典型误区一节,可以加深理解


本文由【waitig】发表在等英博客
本文固定链接:Javascript事件绑定的一个坑
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)