方法一：使用下标实现
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            window.onload = function () {

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

                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)+'个');

                    };

                }

            }

        </script>

    </head>

    <body>

        <button>测试1</button>

        <button>测试2</button>

        <button>测试3</button>

    </body>

</html>

方法二：使用闭包实现（闭包的作用可以延长局部变量的生命周期）
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            window.onload = function () {

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

                //利用闭包实现循环遍历+监听

                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>

    </body>

</html>






方法三：利用ES6实现（let有自己的块作用域）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript">

            window.onload = function () {

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

                //利用let定义i

                for (let i=0, length=btns.length; i<length; i++) {

                        var btn = btns[i];

                        btn.onclick = function () {

                            alert('第'+(i+1)+'个');

                        };

                }

            }

        </script>

    </head>

    <body>

        <button>测试1</button>

        <button>测试2</button>

        <button>测试3</button>

    </body>

</html>






 


												


											
判断点击第几个按钮JS代码的三种方法的更多相关文章
	

    
								
  1. OC和JS交互的三种方法
		
    看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...
    
		
    2. 
						
  2. c#： WebBrowser控件注入js代码的三种方案
		
    聊做备忘. 假设js代码为: string jsCode = @"function showAlert(s) {{ alert('hello, world! ' + s);}}; showA ...
    
		
    3. 
						
  3. Qt样式表之三：实现按钮三态效果的三种方法
		
    按钮的三态,指的是普通态.鼠标的悬停态.按下态.Qt中如果使用的是默认按钮,三态的效果是有的,鼠标放上去会变色,点击的时候有凹陷的效果. 但是如果自定义按钮实现三态效果有三种方法,一种是设置背景图,主 ...
    
		
    4. 
						
  4. HTML文档插入JS代码的几种方法
		
    在HTML文档里嵌入客户端JavaScript代码有4中方法: 1.内联,放置在< script>和标签对之间. 2.放置在由< script>标签的src属性指定的外部文件中 ...
    
		
    5. 
						
  5. js创建对象的三种方法：文本标识法和构造器函数法和返回对象的函数
		
    文本标识法和定义变量差不多,像这样 var obj = {name:'HanMM','2':'Dali'}; 函数构造器法  先创建一个对象函数 function Obj() { this.addre ...
    
		
    6. 
						
  6. 关于SQLServer数据库中字段值为NULL,取出来该字段放在DataTable中，判断datatable中该字段值是否为NULL的三种方法
		
    1. DataTable dt;                               //假设字段为name, dt已经保存了数据dt.rows[0]["name"] == ...
    
		
    7. 
						
  7. asp.net后台向前端输出js脚本的三种方法
		
    //这个方法最快,因为它会输出到html标签之前 Response.Write("<script type='text/javascript'>alert('这个最快')< ...
    
		
    8. 
						
  8. js深度复制三种方法
		
    1.用递归的方式进行深度复制 2.用JSON.stringify加上JSON.parse()进行深度复制 3.用jquery中自带的方法$.extend()进行深度复制 具体实现代码可百度自行查询
    
		
    9. 
						
  9. js创建对象的三种方法
		
    1.使用对象初始化器:{} var person = {....} 2 var person=new object() function person(参数) { this.参数=... } var  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Angular Scope解析与应用
			
    Scope层级结构 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA== ...
    
			
    2. 
						
  2. Tomcat 6.x Perm区内存泄露问题
			
    Tomcat 6.x JSP文件最后改动时间大于当前系统时间导致Perm区内存泄露问题(java Memory pool CMS Perm Gen) 出现场景: 因为測试业务,须要模拟跨天測试,所以一 ...
    
			
    3. 
						
  3. javascript下获取guid或者UTC时间作为唯一值
			
    javascript下,有时出于需要,可以利用guid或UTC时间作为当前页面中的唯一值. 什么场景需要弄这个唯一值? 比如说,用easyUI的treegrid,添加新节点.在treegrid里面 , ...
    
			
    4. 
						
  4. Bing必应地图中国API-显示兴趣点  （转）
			
    Bing必应地图中国API-显示兴趣点 2011-05-24 14:29:55|  分类: Bing&Google|字号 订阅     在地图上显示一个兴趣点,这个应用可以说是最简单但是最广泛 ...
    
			
    5. 
						
  5. Django的CBV方式讲解
			
    CBV使用配置 路径url的配置 cbv 顾名知义就是通过类的方法来调用,我们在url中配置为如下路径 url(r'^cbv.html/', views.Cbv.as_view()), 这里的Cbv是 ...
    
			
    6. 
						
  6. Dubbo近况
			
    刚下班看到开发者头条上一篇讲dubbo前世今生的文章,总结的不错,摘录一下. 从2012年10月23日Dubbo 2.5.3发布后,在Dubbo开源将满一周年之际,阿里基本停止了对Dubbo的主要升级 ...
    
			
    7. 
						
  7. bzoj2115 [Wc2011] Xor——高斯消元 & 异或线性基
			
    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2115 异或两次同一段路径的权值,就相当于没有走这段路径: 由此可以得到启发,对于不同的走法, ...
    
			
    8. 
						
  8. python time 时间模块
			
    time():获取当前系统的时间戳ctime():以人类可读的方式打印当前系统时间sleep():接受一个参数,表示休眠时间 #!/usr/bin/env python #coding:utf8 im ...
    
			
    9. 
						
  9. 谷歌浏览器(Chrome)查看http报文headers信息
			
    转自:https://blog.csdn.net/floatdreamed/article/details/79208719 ①打开谷歌浏览器,随意输入要搜索的内容 ②按下F12键,此时会弹出浏览器的 ...
    
			
    10. 
						
  10. 33. Extjs中的tree节点的操作
			
      转自:https://blog.csdn.net/masterShaw/article/details/51354351?utm_source=blogkpcl9 ext 树节点操作   tree ...
    
			
    11.