关于绑定点击事件

关于绑定点击事件

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>变量、作用域</title>

    

</head>

<body>

<button>1</button>

<button>2</button>

<button>3</button>

    <script type="text/javascript">


var btns = document.getElementsByTagName('button');

         for (var i = 0; i < 3; i++) {

            event(i);

    };

        function event(i){

            btns[i].onclick=function(){

                alert(i+1);

            }

        }

    </script>

</body>

</html>

请问老师测试工具例子中和上面这个例子的区别是什么,为什么测试工具里的点击事件可以直接写在循环中

正在回答

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

2回答

同学你好,针对你的问题如下解答:

(1)点击事件是可以放在循环中的;

(2)区别是,视频中的写法类似闭包函数。在点击事件中并没有i这个值,但是需要用到,这时候就会向上查找,查找到for循环中的i。

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

而同学的代码,通过event方法传递了不同作用域中的i。建议,可以在复习下闭包相关的知识:https://class.imooc.com/lesson/791#mid=19881

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 慕丝5957077 提问者 #1
    请问老师,在视频中的代码中的点击事件加alert(i),是不是只会弹出reglists.length,因为循环结束了,i是最后的值。 我提问的代码,请问这样理解正确吗:每循环一次就执行一次event(i),循环结束后就会有btns[0].onclick,btns[1].onclick,btns[2].onclick, 当点击时,触发了事件,这时候alert(i+1),这个i就会向上找到btn[i]里面的i,所以点击不同的按钮就有不同的i。在网上找过一些解释,关于循环一次event函数就生成新的作用域,循环三次就是三个作用域,请问老师这个怎么理解
    2019-12-10 19:01:13
好帮手慕码 2019-12-10 19:16:58

同学你好,针对你的提问如下解答:

(1)是的,alert(i)弹出的值是15,i本来的值是0~14,当i < reglists.length;不满足的时候,会退出for循环,但是会执行i++,即是最后的值15。

(2)你的理解是正确的。

(3)这个理解可以参考上一条,其实就类似于btns[0],btns[1],btns[2]等等。独立的作用域会保存循环出来不同的值,这样就是不同的按钮。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

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

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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