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

实际上你不需要将参数传递给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。

Answer 2

您需要按如下方式修改代码：

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 3

目前，此代码循环遍历页面上的mainButton按钮，对于每个按钮，调用myFunction并将事件侦听器设置为myFunction的返回值。由于myFunction没有返回任何内容，因此事件侦听器也被设置为nothing。可能你正在寻找的东西是这样的：

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 4

试试这个：

＆＃13;

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);

＆＃13;

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

＆＃13;

获取点击按钮javascript的id

4 个答案: