方法一：使用下标实现
<!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. 【面试】iOS 开发面试题(一）
			
      1. #import 跟#include 又什么差别,@class呢, #import<> 跟 #import""又什么差别? 答:#import是Objectiv ...
    
			
    2. 
						
  2. 《炉石传说》架构设计赏析(4)：Asset管理
			
    欢迎转载,请注明作者[燕良@游戏开发]及原文地址:http://blog.csdn.net/neil3d/article/details/39580197 另外.欢迎大家来我的QQ群交流各种游戏引擎相 ...
    
			
    3. 
						
  3. swift 笔记 (二十一) —— 高级运算符
			
    高级运算符 位运算符 按位取反: ~ 按位与运算:  & 按位或运算:  | 按位异或运算:  ^ 按位左移运算: << 按位右移动算: >> 溢出运算符 自从swif ...
    
			
    4. 
						
  4. Android 修改开机动画（bootanimation）【转】
			
    本文转载自:http://blog.csdn.net/u012301841/article/details/51598115 Android 系统自带的开机动画,是一个白色的 “android” 文字 ...
    
			
    5. 
						
  5. 7-74 JavaScript 事件
			
    7-74 JavaScript 事件 学习要点 掌握常用的javaScript事件 基本概念 事件是一些特定动作发生时所发出的信号,JavaScript中的事件是可以被 JavaScript 侦测到的 ...
    
			
    6. 
						
  6. oracle存储过程和游标的使用
			
    oracle存储过程和游标的使用 (2011-04-19 14:52:47) 转载▼ 游标: 用来查询数据库,获取记录集合(结果集)的指针,我们所说的游标通常是指显式游标,因此从现在起没有特别指明的情 ...
    
			
    7. 
						
  7. ubuntu下的root的创建进入与退出
			
    创建: 在终端中输入:sudo passwd rootEnter new UNIX password: (在这输入你的密码)Retype new UNIX password: (确定你输入的密码)pa ...
    
			
    8. 
						
  8. 【Dairy】2016.10.23 观火&中彩记
			
    ...................... 就第一条可以! 观火10分钟,长郡附近老房子起火...
    
			
    9. 
						
  9. Code First：Fluent API
			
    DbContext类有一个OnModelCreating方法,可以在这里配置模型,该方法接收一个类型为DbModelBuilder的建造者,本文介绍的为Data Anotation的等价方法,这些代码 ...
    
			
    10. 
						
  10. uva1560
			
    In an extended version of the game Lights Out®, is a puzzle with 5 rows of 6 buttons each (the actua ...
    
			
    11.