JavaScript-onClick获取被单击按钮的ID

如何找到正在单击的按钮的ID？

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
}

@Robin van Baalen：按照惯例，ID不应为数字，但可以为数字。

#1 楼

您需要发送ID作为功能参数。这样做：

 <button id="1" onClick="reply_click(this.id)">B1</button>
<button id="2" onClick="reply_click(this.id)">B2</button>
<button id="3" onClick="reply_click(this.id)">B3</button>
    
<script type="text/javascript">
  function reply_click(clicked_id)
  {
      alert(clicked_id);
  }
</script>

这会将ID this.id发送为clicked_id，您可以在其功能中使用它。请点击此处查看操作。

我只想指出，对于任何使用JQuery的event.target.id获得空引用异常的人（对我来说，Firefox和IE都抛出了该异常），这是一个在所有三种主要浏览器中都可以使用的出色解决方案。

– X3074861X
13年8月8日在16:30

兄弟，您是互联网上唯一能够为我解释其工作方式的人。在函数名称中使用变量而不是在实际函数脚本中使用另一个变量对我来说绝对没有意义！在短短的一句话中，您向我解释了，我们放在函数方括号（）中的变量和我们在函数声明中使用的变量是同一件事，只是在AS上传递！这太棒了！谢谢你的主人我赐予我的智慧

–丹尼斯拉夫·卡拉焦佐夫（Denislav Karagiozov）
17年3月21日在11:03

您真的不需要HTML中的任何代码，例如

#2 楼

通常，如果您将代码和标记分开，则事情更容易保持井井有条。定义所有元素，然后在JavaScript部分中，定义应在这些元素上执行的各种操作。

在调用事件处理程序时，该事件处理程序在原本在元素内的上下文中被调用点击。因此，该标识符将指向您单击的DOM元素。然后，您可以通过该标识符访问元素的属性。

例如：

<button id="1">Button 1</button>
<button id="2">Button 2</button>
<button id="3">Button 3</button>

<script type="text/javascript">
var reply_click = function()
{
    alert("Button clicked, id "+this.id+", text"+this.innerHTML);
}
document.getElementById('1').onclick = reply_click;
document.getElementById('2').onclick = reply_click;
document.getElementById('3').onclick = reply_click;
</script>

如果这些按钮位于转发器中并因此是动态生成的，那么您将不知道会有多少个按钮，该怎么办？

– Amc_rtty
2012年10月26日12:47

您可以通过多种方式来处理。例如，动态生成javascript。或者，将相同的类添加到所有按钮，然后使用该类名称遍历所有按钮并以这种方式附加处理程序。

–Jason LeBrun
2012年10月26日17:33

@JasonLeBrun我不知道我要单击的元素的ID是什么。那就是我要找的东西。代码绘制了一个SVG元素，当我单击它时，我需要知道它的“ id”属性。如果以及如何使用此代码？

–有色人种
16年6月7日在14:23

我知道这是一个旧线程，但是在我的现代浏览器（FireFox 78）上，您对此的实现未按预期工作。我的函数是由输入文本框的onkeyup事件触发的，但这是使用window节点的。相反，我不得不使用event.srcElement

– JAX
8月19日18:56

#3 楼

使用纯JAVASCRIPT：
我知道已经很晚了，但它可能会为将来的人们提供帮助：

在HTML部分：

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

在Javascipt控制器中：

function reply_click()
{
    alert(event.srcElement.id);
}

这样，我们在调用javascript函数时不必绑定Element的“ id”。

我喜欢动态功能的想法。我正在使用PHP / MySQL和JS向动态数据库添加功能；这对于将特定功能添加到特定动态类中非常有效。谢谢！

– ejbytes
2016年9月8日23:21

您可以分享@codeling浏览器和环境的详细信息吗？

–́Prateek
17年2月20日在14:02

@Prateek Firefox，最新。我只需要源，因此我现在通过在onClick中将其作为参数传递来解决它（实际上，不是使用onClick而是onChange，这可能是问题吗？）。我也检查了一下，似乎对此事件变量产生了很多困惑-是“隐式”参数还是必须明确将其声明为参数（即函数reply_click（event），我也在某些地方见过）？它仅在通过addEventListener ...分配事件侦听器时可用吗？我玩过，但无法正常工作。

–编码
17-2-20在15:59

仅供参考：全局事件对象适用于Chrome，而不适用于Firefox。

– DaveEdelstein
17-10-10在17:55

#4 楼

（我认为id属性需要以字母开头。可能是错误的。）

您可以进行事件委托...

<div onClick="reply_click()">
    <button id="1"></button>
    <button id="2"></button>
    <button id="3"></button>
</div>

function reply_click(e) {
    e = e || window.event;
    e = e.target || e.srcElement;
    if (e.nodeName === 'BUTTON') {
        alert(e.id);
    }
}

...但是，这需要您相对熟悉古怪的事件模型。

这行不通。您已经在onclick属性中指定了代码，该代码不带任何参数调用reply_click。因此，不会将事件参数传递给该函数。

–Jason LeBrun
11年1月28日在6:03

并且“ id”属性的值可以是任何字符串。它不必以字母开头。

–Jason LeBrun
11年1月28日在6:03

@Jason实际上，在所有好的现代浏览器中，e参数都是自动生成的。如果不是，那么我们必须处理IE6-8，它通过window.event提供该有用的对象。

– sdleihssirhc
11年1月28日在6:06

@Jason另外，id不能以数字开头。

– sdleihssirhc
2011-1-28在6:07

@sdleihssirhc实际上，您如此骄傲自大，所有这些都随HTML5发生了变化。

– sdleihssirhc
11年1月28日在6:08

#5 楼

<button id="1" onClick="reply_click(this)"></button>
<button id="2" onClick="reply_click(this)"></button>
<button id="3" onClick="reply_click(this)"></button>

function reply_click(obj)
{
var id = obj.id;
}

#6 楼

<button id="1" class="clickMe"></button>
<button id="2" class="clickMe"></button>
<button id="3" class="clickMe"></button>

<script>
$('.clickMe').click(function(){
    alert(this.id);
});
</script>

#7 楼

不使用内联JavaScript的情况下如何做
通常建议避免使用内联JavaScript，但是很少有示例来做。
这是我将事件附加到按钮上的方法。
对于推荐的方法与简单的onClick属性相比，我不完全满意。
仅2014浏览器

<button class="btn" id="b1">Button</button>
<script>
let OnEvent = (doc) => {
    return {
        on: (event, className, callback) => {
            doc.addEventListener('click', (event)=>{
                if(!event.target.classList.contains(className)) return;
                callback.call(event.target, event);
            }, false);
        }
    }
};


OnEvent(document).on('click', 'btn', function (e) {
    window.console.log(this.id, e);
});

</script>

仅2013浏览器

<!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
    var hasClass = function(el,className) {
        return el.classList.contains(className);
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script>
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

跨-browser

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

使用jQuery的跨浏览器

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function($){
    $(document).on('click', '.click-me', function(e){
      doSomething.call(this, e);
    });
})(jQuery);

function insertHTML(str){
  var s = document.getElementsByTagName('script'), lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML("beforebegin", str);
}

function doSomething(event){
  console.log(this.id); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--Best if you inject the button element with javascript if you plan to support users with javascript disabled-->
<script type="text/javascript">
insertHTML('<button class="click-me" id="btn1">Button 1</button>');
</script>

<!--Use this when you don't care about broken buttons when javascript is disabled.-->
<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me" id="btn2">Button 2</button>
<input class="click-me" type="button" value="Button 3" id="btn3">

<!--Use this when you want to lead the user somewhere when javascript is disabled-->
<a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a>

</body>
</html>

您可以在文档准备好之前运行它，单击按钮将起作用，因为我们将事件附加到了文档上。 br />这是一个jsfiddle
出于某种奇怪的原因，即使insertHTML函数在我的所有浏览器中都起作用，它也无法正常工作。
如果您不介意insertHTML，可以随时将其替换为document.write缺点

<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>

资料来源：

document.write的替代品是什么？
检查元素是否包含JavaScript中的类？
event.prevent Default（）函数在IE中不起作用
https://gist.github.com/eduardocereto/955642

我一直想知道事件如何像嵌入式onclicks一样高效（在性能方面）。我想他们一定更难追踪吗？

–gabn88
16年5月30日在14:25

取决于您的类命名约定，如果约定有意义，那么它将与onclicks一样容易找到

–提莫·霍维宁（Timo Huovinen）
16年5月31日下午6:01

#8 楼

如果您不想将任何参数传递给onclick函数，只需使用event.target来获取被点击的元素：

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
    // event.target is the element that is clicked (button in this case).
    console.log(event.target.id);
}

#9 楼

使用纯JavaScript，您可以执行以下操作：

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i < buttonsCount; i += 1) {
    buttons[i].onclick = function(e) {
        alert(this.id);
    };
}

在JsFiddle上检查它

您的代码说：Uncaught TypeError：无法设置未定义的属性'onclick'

–alex351
16年1月20日在22:53

那是因为您的html中没有按钮

– vidstige
18年1月24日在18:00

#10 楼

您可以这样简单地进行操作：

<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/>
<script type="text/javascript">
   function showId(obj) {
        var id=obj;
        alert(id);
   }

您可以删除var id = obj;并有alert（obj）;

–Doge
2014年11月22日15:44

我认为这应该是公认的答案，而“（this.id）”对我来说仅适用于FF，IE和Chrome。

–琼·库姆斯
2015年3月30日，下午3:55

#11 楼

<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>

function reply_click()
{
   console.log(window.event.target.id)
}

#12 楼

按钮1按钮2按钮3

var reply_click = function() { 
     alert("Button clicked, id "+this.id+", text"+this.innerHTML); 
} 
document.getElementById('1').onclick = reply_click; 
document.getElementById('2').onclick = reply_click; 
document.getElementById('3').onclick = reply_click;

#13 楼

 <button id="1"class="clickMe"></button>

<button id="2" class="clickMe"></button>

<button id="3" class="clickMe"></button>



$('.clickMe').live('click',function(){

var clickedID = this.id;

});

#14 楼

抱歉，它的答案很晚，但是如果您这样做，它的确很快：-

$(document).ready(function() {
  $('button').on('click', function() {
     alert (this.id);
  });
});

这将获得单击的任何按钮的ID。

如果您只想在某个位置获得单击按钮的价值，只需将它们放在

<div id = "myButtons"> buttons here </div>

之类的容器中，然后将代码更改为：-

 $(document).ready(function() {
      $('.myButtons button').on('click', function() {
         alert (this.id);
      });
    });

我希望这会有所帮助

我认为myButtons是一个id，并且您将它用作jquery中带有点（。）的类选择器，我认为这应该以＃开头。

–shashi verma
18/12/22在7:39

#15 楼

这将记录已单击元素的id：addFields。

<button id="addFields" onclick="addFields()">+</button>

<script>

function addFields(){ 
    console.log(event.toElement.id)
}

</script>

#16 楼

这是对Prateek答案的改进-事件是通过参数传递的，因此reply_click不需要使用全局变量（并且到目前为止，没有主体提供此变体）

 function reply_click(e) {
  console.log(e.target.id);
}

 <button id="1" onClick="reply_click(event)">B1</button>
<button id="2" onClick="reply_click(event)">B2</button>
<button id="3" onClick="reply_click(event)">B3</button>

另外两个用户是否已经将其发布为答案？

– j08691
7月20日19:02

@ j08691您能否提供该答案的链接-因为我没有看到类似的答案

–卡米尔（KamilKiełczewski）
7月20日19:02

stackoverflow.com/a/53084521/616443和stackoverflow.com/a/39941379/616443

– j08691
7月20日19:16

第一个和第二个链接中的@ j08691答案在函数reply_click中使用GLOBAL（事件）变量

–卡米尔（KamilKiełczewski）
7月20日19:19

编程黑洞网