Javascript事件绑定的一个坑

来源：互联网发布：天音采集软件编辑：程序博客网时间：2024/06/02 06:53

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

阅读全文

0 0