獲取點擊按鈕javascript的id

Question

我試圖簡單地獲取一個單擊按鈕的id並使用alert來顯示它。 下面的代碼嘗試添加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

嘗試這個：

 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">