遍历加监听

2021-01-15 16:03:56 阅读：203 来源： 互联网

标签：function 遍历 length onclick var btn 监听 btns

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){

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

        // 遍历加监听

        // -----------有问题--------------
       /*  for (var i = 0, length = btns.length; i < length; i++) {
            var obj = btns[i];
            obj.onclick=function(){
                 alert("第" + (i+1) + "个");//第4个
            }
        } */


        // ---------------解决一：保存下标--------------------
         /* for (var i = 0, length = btns.length; i < length; i++) {
                var btn = btns[i];
                // 将btn所对应的下标保存在btn上
                btn.index=i;
                btn.onclick = function () {
                    alert("第" + (this.index+1) + "个");
                }
            }    */


        //-------------------解决二：利用闭包----------------
            for (var i = 0, length = btns.length; i < length; i++) {
                (function (i){
                var btn = btns[i];
                btn.onclick = function () {
                    alert("第" + (i + 1) + "个");
                }
             })(i);
                
                
            } 
 };
    </script>
</head>
<body>
    <button>测试1</button>
    <button>测试2</button>
    <button>测试3</button>
    <!-- 需求：点击某个按钮，提示“点击的是第n个按钮” -->
    
</body>
</html>

标签：function,遍历,length,onclick,var,btn,监听,btns
来源： https://www.cnblogs.com/hr-7/p/14282512.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

遍历加监听