方法一：使用下标实现
<!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. 利用vue-cli配合vue-router搭建一个完整的spa流程
			
    好文章备忘录: 转自:https://segmentfault.com/a/1190000009160934?_ea=1849098 demo源码:https://github.com/1590123 ...
    
			
    2. 
						
  2. 32位win7系统下配置IIS遇到php-cgi.exe - FastCGI 进程意外退出问题的解决的方法
			
    今天重装了一下系统,是32位的WIN7.装完系统后想把IIS装回来,由于有时候须要用到笔记本处理一些事情.结果WEBserver正常了.但IIS的FASTCGI模块始终不能解析PHP,一直报php-c ...
    
			
    3. 
						
  3. js坑爹笔试题目汇总（持续更新中）
			
    把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...
    
			
    4. 
						
  4. web 开发之js---JS变量也要注意初始化
			
    原先以为js作为弱类型语言,变量的初始化没必要,但是: var text; text+="你好"; alert(text); 对话框弹出的内容是:"undefined你好 ...
    
			
    5. 
						
  5. UILongPressGestureRecognizer 运行两次的解决的方法
			
    近期维护之前用iOS SDK 3.2写过的3年多前的map方面的模块,在地图上长按pin,发觉一个点莫名奇异点插了两个pin. 查了一下,原来是如今的sdk要在UILongPressGestureRe ...
    
			
    6. 
						
  6. Codeforces Beta Round #96 (Div. 1) C. Logo Turtle DP
			
    C. Logo Turtle   A lot of people associate Logo programming language with turtle graphics. In this c ...
    
			
    7. 
						
  7. go语言---map
			
    go语言---map https://blog.csdn.net/cyk2396/article/details/78890185 一.map的用法: type PersonDB struct { I ...
    
			
    8. 
						
  8. openstack cluster 封装
			
    
			
    9. 
						
  9. Spark 分布式环境---slave节点无法启动（已解决）
			
    soyo@soyo-VPCCB3S1C:~$ start-slaves.sh soyo-slave01: starting org.apache.spark.deploy.worker.Worker, ...
    
			
    10. 
						
  10. Tomcat优化和JVM分析工具
			
    Tomcat的常见优化和JVM常见分析工具 Tomcat的常用优化配置 (1) 内存空间: /etc/sysconfig/tomcat JAVA_OPTS="-server -Xms32g  ...
    
			
    11.