为什么在这个点击事件内部,i的值可以是0,1,2,呢?

为什么在这个点击事件内部,i的值可以是0,1,2,呢?

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>2-1</title>

    <style>

        /*补充代码*/

        li:hover{

         cursor:pointer;

        }

    </style>

</head>

<body>

    <!-- 补充代码 -->

    <ul>

     <li>1</li>

     <li>2</li>

     <li>3</li>

    </ul>  

    <script>

        var li=document.getElementsByTagName("li");

        for(var i=0,len=li.length;i<len;i++){

            (function(i){

               // 补充代码

               console.log(i);

               li[i].onclick=function(){

                console.log(i);

                alert(i);

               }

            })(i)

        }

    </script>

</body>

</html>

在这里输入代码,可通过选择【代码语言】突出显示


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕言 2020-12-19 13:47:56

同学你好,如果想在事件内获取i值为0,1,2,3等,是可以使用这种方式的,祝学习愉快~

好帮手慕言 2020-12-19 10:17:34

同学你好,解答如下:

1、代码中嵌套了一个函数,如下:
http://img1.sycdn.imooc.com//climg/5fdd6174094d6cbd07000305.jpg

函数会形成一个局部作用域,循环几次,就会形成几个局部作用域,几个局部作用域不会互相影响的,如下图:

http://img1.sycdn.imooc.com//climg/5fdd625f09861ec404750492.jpg

当li[0]的点击事件触发时,它的事件处理函数,就会先在自己的作用域中寻找变量i,此时它所在的作用域中,有i=0,所以直接打印0,其余li点击同理。

这样就实现了点击每一个li,弹出对应的索引了。

2、是为了形成局部作用域,具体可以参考第一条。

祝学习愉快~

  • 提问者 慕前端2185815 #1

    那是不是以后在遍历数组中,为每个数据添加事件时,可以采用这种方法,在事件外部添加一个这样的自执行的局部作用域呢?

    2020-12-19 11:01:04
提问者 慕前端2185815 2020-12-18 21:28:19

还有一问题:这里的自执行函数有什么作用呢?

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师