如何将事件处理程序附加到使用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动态生成文档元素？

回答

相关问题