获取点击按钮的 ID javascript

Question

我试图简单地获取单击按钮的 ID 并使用警报来显示它。下面的代码尝试 addEventListener，如果没有回退到 attachEvent。为了获取 ID，我试图将 this.id 作为参数传递给 myFunction。但这不起作用。我已经看到很多使用 Jquery 之类的很棒的解决方案，但不幸的是我只能为此使用纯 JS。如何获取点击按钮的 ID 并将其存储在要显示的变量中？

function addEvents()
{
    var buttonArray=document.getElementsByClassName('mainButton');
    for(i=0; i < buttonArray.length; i++)
    {
        if (document.addEventListener) {
        buttonArray[i].addEventListener("click", myFunction(this.id));
        } else if (document.attachEvent) {
        buttonArray[i].attachEvent("onclick", myFunction(this.id));
}

function myFunction(clickedId) {
    alert("Button" + clickedId + "was clicked.");
} 
}
    }

Answer 1

您需要修改您的代码如下：

function addEvents()
{
    var buttonArray = document.getElementsByClassName('someclass');

    for(i=0; i < buttonArray.length; i++)
    {
        if (document.addEventListener) {
          buttonArray[i].addEventListener("click", myFunction);
        } else if (document.attachEvent) {
          buttonArray[i].attachEvent("onclick", myFunction);
        }

        function myFunction(e) {
            alert("Button" + e.target.id + "was clicked.");
        }
    }
}

myFunction 是回调函数，通过使用 myFunction(id) 调用函数，从而破坏了回调的目的。

Answer 2

目前，此代码循环遍历页面上的 mainButton 按钮，并为每个按钮调用 myFunction 并将事件侦听器设置为 myFunction 的 return 值。由于 myFunction return 什么都没有，因此事件侦听器也被设置为什么都没有。相反，您可能正在寻找的是这样的东西：

if (document.addEventListener) {
    buttonArray[i].addEventListener("click",
        function() { myFunction(this.id); });
}
else if (document.attachEvent) {
    buttonArray[i].attachEvent("onclick",
        function() { myFunction(this.id); });
}

最好将 myFunction 的声明移到 for 循环之外。

Answer 3

试试这个：

Element.prototype.addEvent = function(eventName, callFunction) {
  if (this.addEventListener) this.addEventListener(eventName.substring(2), callFunction, false);
  else if (this.attachEvent) this.attachEvent(eventName, callFunction);
};


function clicked(e) { 
  alert(this.id);
}


document.getElementById('myButton').addEvent('onclick', clicked);

<input id="myButton" type="button" value="Click me">

Answer 4

实际上您不需要将参数传递给 myFunction。那是一个回调函数，你可以使用事件变量。

function addEvents()
{
    var buttonArray = document.getElementsByClassName('mainButton');
    for(i = 0; i < buttonArray.length; i++)
    {
        if (document.addEventListener) {
            buttonArray[i].addEventListener("click", myFunction);
        } 
        else { 
            if (document.attachEvent) {
                buttonArray[i].attachEvent("onclick", myFunction);
            }
        }
    }
}

function myFunction(e) {
    alert("Button " + e.target.id + " was clicked.");
}

这里是 jsfiddle.

获取点击按钮的 ID javascript

get id of clicked button javascript

javascript

cross-browser

addeventlistener