Question

有没有办法附加像onclick = alert（“Hi”）这样的事件处理程序;到现有的文档元素？（在我的情况下的图像）

我已经尝试了失败，其中包含以下内容：

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;

我的想法已经不多了。有人知道怎么做吗？

Answer 1

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

在这种情况下，event参数是可选的。函数体是代码，而不是字符串。

Answer 2

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;

再一次。

Answer 3

<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与Internet Explorer不同，它不会使每个元素的名称/ id成为全局变量。 myImageInput.onclick = ...无法在Firefox中使用，您必须使用document.getElementById(theID)或document.forms['formName'].elements['elementNAME']（如果它位于<form>中）才能获得对它的引用。

如果上面复制并粘贴到文档中的示例在Firefox 3.5中不起作用，请禁用所有加载项（可能其中一个导致问题）。如果仍然无效，请edit your question向我们展示您的确切来源，以便我们帮助确定其无效的原因。

Answer 4

这是在打瞌睡！

<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 4x，FF 3.5x

中测试

Answer 5

zzandy的第一个答案应该没问题。检查你是否正确地做了一切，特别是firefox可以挑选确保它处于兼容模式。这是完整的代码。

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

Answer 6

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

如何使用Javascript动态地将事件处理程序附加到文档元素？

6 个答案: