將參數傳遞給javascript onclick而不使用HTML

我無法弄清楚這一點。我試圖創建一個純粹在Javascript中的onclick處理程序。將參數傳遞給javascript onclick而不使用HTML

我打算在這裏做的是在這個DIV裏面，有一些我可以點擊的項目集合。目前，這些項目將是從0到9的數字。點擊某個號碼後，屏幕上將彈出一個僅包含該號碼的系統消息。我將問題縮小到僅僅是onclick處理程序定義。

如果我用這個格式：

item[n].onclick=function(n){ 
     handler(n); 
    }

處理程序將觸發只有當單擊一個數字是正確的，但出現的消息是一些關於鼠標事件。

如果我使用以下格式：

item[n].onclick=function(){ 
     handler(n); 
    }

的處理程序將通過其又被打印作爲消息的值-1。我認爲這意味着「虛假」。

如何修改這個：

item[n].onclick=function(){ 
     handler(n); 
    }

，使「N」被用作處理器參數是一樣的，因爲我點擊屏幕上的數字？

我的代碼如下：

<div ID="Itemset"></div> 

function handler(n){ 
    alert(n); 
} 

collections=document.getElementById('Itemset'); 
for(n=0;n<10;n++){ 
    item[n]=document.createElement('DIV'); 
    item[n].innerHTML=n; 
    collections.appendChild(item[n]); 
    item[n].onclick=function(n){ 
     handler(n); 
    } 
}

我正在有效地試圖做的，如果你想了解它的HTML明智的是這樣的：

<div ID="Itemset"> 
<div onclick="handler(0);">0</div> 
<div onclick="handler(1);">1</div> 
<div onclick="handler(2);">2</div> 
<div onclick="handler(3);">3</div> 
<div onclick="handler(4);">4</div> 
<div onclick="handler(5);">5</div> 
<div onclick="handler(6);">6</div> 
<div onclick="handler(7);">7</div> 
<div onclick="handler(8);">8</div> 
<div onclick="handler(9);">9</div> 
</div>

只是我不想寫出onclick="handler(n);"一百萬次。

有什麼建議嗎？並隨時指向另一個有我需要的答案的資源，如果有的話。

UPDATE

我在尋找與舊的瀏覽器兼容的東西爲好。我將不得不去綁定功能，因爲根據mozilla文檔，它適用於IE 9 +。我正在尋找適用於IE 7+以及其他瀏覽器的東西。如果沒有其他選擇，我可能不得不去找事件監聽器。

來源

2015-12-26 Mike

你可能需要使用'handler（this.innerHTML）;'https://jsfiddle.net/ujzbem71/ – bansi

您在這裏有一個封閉的問題（見JavaScript closure inside loops – simple practical example），一個簡單的解決方案是使用bind使用的n電流值是處理函數的參數

item[n].onclick=handler.bind(item[n],n);

來源

2015-12-26 05:57:37 Musa

U可以使用的addEventListener和ID找到點擊元素...

document.getElementById("Itemset").addEventListener("click", function(e) { 
     // e.target is the clicked element! 
     // If it was a list item 
     var value_data = parseInt(e.target.textContent); 
     if(e.target && value_data > -1) { 
      alert("Malai test:: "+value_data); 
         //handler(value_data); 
     } 
    });

https://jsfiddle.net/malai/tydfx0az/

來源

2015-12-26 06:00:11

，我發現我的答案在這裏：https://bytes.com/topic/javascript/answers/652914-how-pass-parameter-using-dom-onclick-function-event

相反的：

item[n].onclick=function(n){ 
    handler(n); 
}

我必須做的：

item[n].onclick=new Function('handler('+n+')');

搞怪日在創建新實例時，字功能需要大寫。這是尷尬的我走這條路線，但它在IE 7+工作

來源

2015-12-26 06:46:11 Mike

一種選擇是：

function handler(){ 
    alert(this.id); 
} 
function myFunction() { 

    var item=[]; 

    collections=document.getElementById('Itemset'); 
    for(n=0;n<10;n++){ 
     item[n]=document.createElement('DIV'); 
     item[n].innerHTML=n; 
     item[n].setAttribute("id","itemset"+n); 
     collections.appendChild(item[n]); 
     item[n].onclick=handler; 
    } 
}

插入動態IDS的元素，當你點擊任何元素使用this.id檢索其ID並用這個價值做任何你想做的事情。

這就是全部。

希望這會有所幫助。

來源

2015-12-26 06:59:15

將參數傳遞給javascript onclick而不使用HTML

回答

相關問題