如何使用 JavaScript/jQuery 获取点击按钮的 ID？

给定一组按钮，任务是使用 JavaScript 和 jQuery 确定单击按钮时的按钮 ID。

使用 JavaScript 获取点击按钮的 ID

示例 1：此示例为每个按钮设置一个onClick 事件，当单击按钮时，按钮的 ID 会传递给函数，然后它会在屏幕上打印 ID。

 
 
     
         
            Get the ID of the clicked button
            using JavaScript
        
     
      
     
      
         
            GeeksForGeeks 
        
  
        
        
          
        
            Button1
        
          
        
            Button2
        
          
        
            Button3
        
  
        
        
          
        
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            el_up.innerHTML = "Click on button to get ID";
          
            function GFG_click(clicked) {
                el_down.innerHTML = "ID = "+clicked;
            }         
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：本示例在                             

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

使用 jQuery 获取点击按钮的 ID

jQuery on() 方法：该方法为被选元素和子元素添加一个或多个事件处理程序。

句法：

$(selector).on(event, childSelector, data, function, map)

参数：

• 事件：此参数是必需的。它指定一个或多个事件或命名空间以附加到所选元素。如果有多个事件值，它们之间用空格分隔。事件必须是有效的。
• childSelector：这个参数是可选的。它指定事件处理程序应该只附加到定义的子元素。
• 数据：该参数是可选的。它指定要传递给函数的附加数据。
• 函数：此参数是必需的。它指定事件发生时要运行的函数。
• map：它指定了一个事件映射（{event:func(), event:func(), …}）具有一个或多个要添加到所选元素的事件，以及在事件发生时运行的函数。

jQuery click() 方法：该方法触发点击事件，或者添加一个函数在点击事件发生时运行。单击元素时会发生单击事件。

句法：

• 触发选中元素的点击事件：

  $(selector).click()

• 给点击事件添加一个函数：

  $(selector).click(function)

参数：此方法接受可选的单参数函数。它指定发生单击事件时要运行的函数。

示例 1：本示例通过使用click() 方法为每个按钮设置一个onClick 事件，当单击按钮时，将按钮的 ID 传递给函数，然后将 ID 打印在屏幕上。

 
 
     
         
            Get the ID of the clicked button
            using jQuery
        
          
        
        
     
  
     
      
         
            GeeksForGeeks 
        
  
        
        
          
         Button1
         Button2
         Button3
          
        
        
          
        
            $('#GFG_UP').text("Click on button to get ID");
              
            $("button").click(function() {
                var t = $(this).attr('id');
                $('#GFG_DOWN').text("ID = " + t);
            });                     
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：本示例通过使用on() 方法为每个按钮设置一个onClick 事件，当单击按钮时，将按钮的 ID 传递给函数，然后将 ID 打印到屏幕上。

 
 
     
         
            Get the ID of the clicked button
            using jQuery
        
          
        
        
     
      
    
           
         
            GeeksForGeeks 
        
  
        
        
          
         Button1
         Button2
         Button3
          
        
        
          
        
            $('#GFG_UP').text("Click on button to get ID");
              
            $("button").on('click',function() {
                var t = (this.id);
                $('#GFG_DOWN').text("ID = " + t);
            });                     
         
     
                    

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。