方法一：使用下标实现
<!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. cocos2d-x 3.6版连连看版本号控制
			
    为了以后的开发和管理.源代码开发必须要使用版本号控制.我们当然选择git来做版本号控制了. 假设你在终端输入git,提示不是一个命令的话.那就说明你的机器没有安装git工具.那就安装一个,百度之有非常 ...
    
			
    2. 
						
  2. php  &amp; 和 &amp;amp; （主要是url 问题）
			
    ini_set('arg_separator.output','&'); 也能够在php.ini 改动
    
			
    3. 
						
  3. hdu1115 Lifting the Stone（几何，求多边形重心模板题）
			
    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=1115">http://acm.hdu.edu.cn/showproblem.php ...
    
			
    4. 
						
  4. JSP学习笔记七之Cookie
			
    首先提一下http协议的无状态性.指的是server不会记住已经给它发过请求的client. 每次收到请求都会觉得是一个新的client发过来的. (即:server不会记住给他发过请求的client ...
    
			
    5. 
						
  5. 自定义Notification实现例子
			
    1.自定义view: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...
    
			
    6. 
						
  6. Java 反射 —— 运行时的类型信息
			
    1. 反射机制的由来 RTTI 机制可以告知某个对象的确切类型,但有一个前提,该类型在编译时必须已知(编译器在编译时打开和检查 .class 文件以获取类型信息).似乎是个很宽松的限制,但假如你获取了 ...
    
			
    7. 
						
  7. HTTP请求错误码大全(转）
			
    一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用 详细分解: 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 ...
    
			
    8. 
						
  8. 最长回文子串问题 O(n)算法 manacher URAL1297 HDU3068
			
    先来看一道简单的题,ural1297 给定一个1000长度的字符串,求最长回文子串. 看起来很Naive,乱搞一下,O(n^2)都可以解决. 再来看这个题 HDU3068 120个110000长度的字 ...
    
			
    9. 
						
  9. Java IO 字节流与字符流 （二）
			
    1. 什么是流 Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序 ...
    
			
    10. 
						
  10. 25.EXTJS 主页面的jsp
			
    1. /** * @author sux * @time 2011-1-11 * @desc main page */ var mainPage = Ext.extend(Ext.Viewport,{ ...
    
			
    11.