方法一：使用下标实现
<!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. &times变成x
			
    昨天晚上遇到一个很尴尬的bug. 当使用IE浏览器,跳转链接使用&传参的时候第二个参数是times,也就是&times(你有可能看到的是x,实际是&times),结果& ...
    
			
    2. 
						
  2. 利用SEH进行代码混淆
			
    这几天在重看SEH机制,收获颇丰. 随手写了一个用SEH进行跳转的代码贴于此处以作纪念. 当发生异常,并捕捉了异常.在OS的异常处理机制下.会进入异常过滤函数. 过滤函数能够返回EXCEPTION_E ...
    
			
    3. 
						
  3. ERROR: resetting DM9000 -&gt; not responding   dm9000 not found at 0x88000000问题解决
			
    ERROR: resetting DM9000 -> not responding                                        dm9000 not found ...
    
			
    4. 
						
  4. 2013级C++第12周(春)项目——成员的訪问属性、多重继承
			
    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 第一部分 程序阅读 1.阅读程序.分析类中成员 ...
    
			
    5. 
						
  5. 嵌入式开发之函数解析---ip地址2进制转字符inet_ntoa 调用中只生效一次
			
    inet_addr()   简述:将一个点间隔地址转换成一个in_addr. #include <winsock.h> unsigned long PASCAL FAR inet_addr ...
    
			
    6. 
						
  6. Genymotion模拟器连接不上开发服务器解决办法
			
    问题截图: 问题原因:虚拟机没有联网.可以打开虚拟机的浏览器随便打开一个网站试一下能不能正常上网.如果不能正常上网. 第一步: 打开VirtualBox 点击确定.重启Genymotion.
    
			
    7. 
						
  7. Credit Risk Scorecards  Credit Risk Modeling   评分卡  KS AR
			
    https://cn.mathworks.com/help/finance/creditscorecard.validatemodel.html?requestedDomain=www.mathwor ...
    
			
    8. 
						
  8. curl HTTP_USER_AGENT
			
    [root@bigdata-server-01 ~]# curl 13.26.92.20array(27) { ["HTTP_USER_AGENT"]=> string(11 ...
    
			
    9. 
						
  9. Junit 测试基础
			
    /** * 1.测试函数以     @Test  注解, 函数名可以根据测试内容自定义但返回值必须是void,不能有参数 * 2.assertEquals(arg0,arg1); 用来判断期待值是否和 ...
    
			
    10. 
						
  10. NSubstitute
			
    https://github.com/nsubstitute/NSubstitute http://nsubstitute.github.io/help/creating-a-substitute/
    
			
    11.