如何將事件處理程序附加到使用JavaScript動態生成文檔元素？

有沒有辦法附加一個事件處理程序，如onclick = alert（「Hi」）;到現有的文檔元素？（在我的情況的圖像）如何將事件處理程序附加到使用JavaScript動態生成文檔元素？

我已經嘗試和失敗與如下：

img = document.getElementById("my_image"); 

img.onclick = "alert('hi')"; 

img.setAttribute ('onclick',"alert('hi')"); 

img.onclick = function() {"alert('hi')";}; 

img.onclick = function(evt) {"alert('hi')";}; 

img.setAttribute ('onclick',function() {"alert('hi')";}); 

function handler(evt) {"alert('hi')";} 
img.onclick = handler;

我運行的想法。有人知道怎麼做這個嗎？

來源

2009-09-11 Kshitij Saxena -KJ-

到目前爲止所有的答案都適用於我，包括FF 3.5。也許你正在做其他事情導致失敗？ – 2009-09-11 15:33:20

測試通過zzandy第一個答案應該罰款。檢查你正在做的一切正確，特別是Firefox可以挑剔，確保它在complient模式。這是完整的代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script type="text/javascript"> 
function AttachEvent() 
{ 
    var theElement = document.getElementById('the_image'); 
    theElement.onclick = function() { alert('message'); } 
} 
</script> 
</head> 
<body> 
<img id='the_image' src='some_img.jpg' title='Click on the image' alt='Image not found' /> 
<button onclick='AttachEvent();'>Enable Click on image</button> 
</body> 
</html>

來源

2009-09-11 15:51:30 Dave

element.onclick = function(event){alert("message");}

event參數在這種情況下是可選的。函數體是代碼，而不是字符串。

來源

2009-09-11 15:16:46 zzandy

只是不工作！ :( – 2009-09-11 15:20:26

有問題的元素是輸入類型圖像 – 2009-09-11 15:20:58

嘗試onchange，可能會有所幫助。或者你想在「打開文件」對話框之前進行一些操作嗎？ – zzandy 2009-09-11 15:57:31

img.onclick = function() { alert('hi'); };

來源

2009-09-11 15:17:07 Quentin

不能在Firefox 3.5中工作 – 2009-09-11 15:23:40

適用於我，Firefox 3.5。 – NickFitz 2009-09-11 15:29:53

適用於我，FF 3.5 – 2009-09-11 15:32:15

<body> 
<input type="image" id="myImageInput"> 

<script type="text/javascript"> 
var theImageInput = document.getElementById('myImageInput'); 
theImageInput.onclick = function() { alert('myImageInput onclick invoked!'); } 
</script> 
</body>

測試，在Firefox 3.5.3工作。

要點：

你必須獲得對元素的引用它的文件中被渲染後。
Firefox不像IE瀏覽器，它不會使每個元素的名稱/ ID成爲全局變量。 myImageInput.onclick = ...在Firefox中不起作用，您必須使用document.getElementById(theID)或document.forms['formName'].elements['elementNAME']（如果它在<form>中）才能獲得對其的引用。

如果上面的示例複製並粘貼到文檔中並不適用於Firefox 3.5，請禁用所有附件（也許其中一個導致問題）。如果仍然不起作用，請edit your question向我們顯示您的確切來源，以便我們幫助確定它無法正常工作的原因。

來源

2009-09-11 15:31:39

img = document.getElementById("my_image"); 

img.onclick = "alert('hi')";

這是分配一個字符串。

img.setAttribute ('onclick',"alert('hi')");

這也是分配一個字符串。

img.onclick = function() {"alert('hi')";};

這是分配的功能，但所有的函數包含一個字符串。您應該從alert('hi')刪除引號。

img.onclick = function(evt) {"alert('hi')";};

此外，一個只包含字符串的函數。

img.setAttribute ('onclick',function() {"alert('hi')";});

再次...

function handler(evt) {"alert('hi')";} 
img.onclick = handler;

又一次。

來源

2009-09-11 15:33:43 NickFitz

這是在做夢！

<img src="PathToImage" id="myImage" height="30px" width="30px" /> 

<script type="text/javascript"> 
    var i = document.getElementById("myImage"); 
    i.onclick = function() { alert("hello"); }; 
</script>

編輯： - 在IE 7，Chrome的4倍，3.5倍FF

來源

2009-09-11 15:41:06 TheVillageIdiot

無需創建中間變量''，特別是它在全局範圍內聲明。 – kangax 2009-09-11 17:22:26

如何將事件處理程序附加到使用JavaScript動態生成文檔元素？

回答

相關問題